vue面试总结

Posted wangwenxin123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.从视图上读取用户的输入,然后又将用户的输入通过接口写入到数据库中,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于vue面试总结的主要内容,如果未能解决你的问题,请参考以下文章

VUE面试题总结

vue面试总结

vue前端面试题总结

vue基本知识点总结—面试必备

2021.6月最新前端面试题总结(JavaScriptHtml5小程序ReactES6Vue.js源码全栈)

vue面试题总结