vue面试总结

Posted 2020-12-14 wangwenxin123

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.从视图上读取用户的输入，然后又将用户的输入通过接口写入到数据库中，