zoukankan      html  css  js  c++  java
  • vue面试总结

    vue面试总结
     
    1.vue生命周期
    1、beforeCreate():组件实例刚刚被创建  (el和data并未初始化)
    2、created():组件创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)
    3、beforeMount():模板编译/挂载之前 (完成了el和data初始化)
    4、Mounted():模板编译/挂载之后 (完成挂载)
    5、beforeUpdate():组件更新之前
    6、updated():组件更新之后
    7、beforedestroy():组件销毁之前
    8、destroyed():组件销毁之后
    9、  activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。
         deactivated keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
    适应场景:
    beforecreate : 可以在这加个loading事件,在加载实例时触发
    created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
    mounted : 挂载元素,获取到DOM节点
    updated : 如果对数据统一处理,在这里写上相应函数
    beforeDestroy : 可以做一个确认停止事件的确认框
    nextTick : 更新数据后立即操作dom
     
    语言阐述:
    那么我最常用的:created、mounted、destroyed、activated
                    created通常在初始化数据的时候使用,比如说:我们获取异步的ajax,初始化ajax获取的数据放在created里面
                    mounted挂载元素,跟dom相关的 比如说触发获取dom的操作,
                    destroyed 比如说我在这个页面做了一个定时器,那么离开页面的时候,要做一个clear,要不然就会出现内存泄露,因为是单页面应用,跳转之后不会自动销毁。        
             再比如监听一些事件,比如滚动事件,离开的时候也要给它卸载,不然造成内存泄露;
                    activated 需要配合keep-alive才能生效,比如首页这种存量大更新不频繁的地方,可以给它做一个缓存,再第一次访问的时候把它缓存下来。用于性能优化缓存dom和数据。
            使用:套到路由的外边,整个页面就会被它缓存起来,但是之后你会发现,在后台数据更新的时候,第一次访问过后再刷新的时候,还是之前的数据,dom就不再更新了。如果想要继续更新的话,就需要把初始化数据,也就是created里面的数据放到activaed里面,这样就会解除缓存。
     
    2.vue的传值
    1.路由带参数进行传值:
            a.通过query把orderId 从A组件传递给B组件,
                this.$router.push({path:'/conponentsB',query:{orderId:123}})     //跳转到B
            b.在B组件中获取A组件传递过来的参数
                this.$route.query.orderId
    2.通过设置 session Storage缓存的形式进行传递
     
    3.父子组件传值
        父传子   props
        子传父   子组件用$emit触发事件,父组件用$on监听子组件的事件
        兄弟传值  定义一个新的vue实例eventBus.js, 
                  然后a组件用 eventBus.$emit,
                    b组件用 evrntBus.$on 
        父链  this.$parent 子组件使用可以直接访问该组件的父实例或组件
             this.$children 父组件也可以使用它访问所有的子组件
        子组件索引  用ref来为子组件指定一个索引名称,就是在子组件标签上ref指定一个名称,然后在父组件通过this.$refs访问指定名称的子组件
        vuex传值 
          vuex有state、mutations、action、getters
        state存放属性、变量
        mutations用于同步,改变state的值 
        action 用于调取异步,如获取ajax, 并传递给mutations
        Getters    可以对state进行计算操作,
        modules  主要用来拆分state
        
    常用的是mutations  对应的方法是 commit
           actions  对应的方法是  dispatch
    3.computed、watch的区别
    computed计算属性本身具有缓存特性,界面刷新,计算属性有限读取缓存,判断是否有相关值的改变,相关值改变才会计算属性
    (举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。)
     
    而watch方法调用没有,
        每次刷新,方法都会执行,类似于事件监听+事件机制;
        watch的方法默认是不会执行的,只有依赖的属性发生变化才会执行。
    watch无法监听数组的情况,以及解决方案
    无法监听数组的情况  
    1. 利用索引直接设置一个数组项时,例如:arr[indexOfItem] = newValue;  
    2. 修改数组的长度时,例如:arr.length = newLength;  
    3. 解决方案  1.this.$set(arr, index, newVal);  2.使用数组 splice 方法
    4.MVVM模式(前后端分离的模式)
        (注:react、vue都不是MVVM框架,只是有借鉴MVVM的思路)
    View :用户看到的视图
    Model :本地数据和数据库中的数据
    ViewModel:视图和数据库之间的桥,它就像是一个中转站,负责转换Model中的数据对象来让数据变得更容易管理和使用,
                            该层向上 与视图层进行双向绑定,
                            向下与Model层通过接口请求进行数据交互,
        通常我们写产品:
                        1.通过接口从数据库中读取数据,然后将数据经过处理展现到用户看到的视图层
                        2.从视图上读取用户的输入,然后又将用户的输入通过接口写入到数据库中,
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    @import的最优写法
    IE7 下hack的方法
    在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory。
    MySQL 依赖另外一个统计出来数据更新表数据的范例
    PHP的bool值
    Ubuntu 下如何配置Jira
    ubuntu 访问Windows的共享
    备份 mysql数据
    ubuntu从中文切换成英文的方法
    css锚点定位偏移原理兼容浏览器
  • 原文地址:https://www.cnblogs.com/wangwenxin123/p/13251394.html
Copyright © 2011-2022 走看看