2021面试题栏 -- vue部分

1，vue的生命周期？

        答案：vue有8个生命周期钩子函数，表示一个vue实例从创建到摧毁的过程。分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

2，常用的指令有哪些？

        答案：

                v-model：实现双向数据绑定；

                v-once：页面进入时，只渲染一次；

                v-if：控制元素是否创建和摧毁，效果上表现为元素的显示和隐藏；

                v-show：控制元素的显示和隐藏；

                v-for：循环遍历；

                v-bind：可以缩写为“：”数据的动态绑定；

                v-on：可以缩写为“@” 给元素绑定函数；

3，computed和watch的区别？

        答案：

        computed：计算属性，支持缓存，计算结果会缓存在vue实例中，除第一次执行计算外以后会在缓存中直接读取，除非依赖数据发生变化，才会重新计算；不支持异步操作；

        watch：侦听属性，不支持缓存，每次使用计算后的数据都是重新计算的结果；watch内部支持异步操作；watch接受两个参数，第一个是最新的值，第二个是原来的值；函数有两个参数，分别是immediate表示组件加载立即触发回调函数执行；deep深度监听。

4，watch能监听computed的属性吗？

        答案：可以监听；

5，vue的响应式原理？

        答案：在一个vue实例被创建的时候，data中的变量会被vue遍历property，并使用Object.property把这些property全部转换为getter/setter;getter/setter使用者是不可见的，当data中的数据发生变更和使用的时候会被调用。vue实例有watcher实例，用于监听data对象并收集数据property记录为依赖，然后调用setter和getter实现实例的重新渲染。

6，mounted拿到数据后可以直接获取dom吗？

        答案：可以，只要mounted中获取dom的代码段执行时间在dom树渲染后。$nextTick这个vue的全局方法或者定时操作；

7，nextTick原理？

        答案：把回调函数放入callback等待执行，将执行函数放到微任务或者宏任务中，事件循环到微任务或者宏任务的时候，执行函数依次执行callback中的回调；

8，vue模板（template）里为什么不能使用多个头结点？

        答案：首先template标签的特性是：隐藏性，任意性，无效性。意思就是我们在实际的.vue文件中，template只是一个标志，他不被渲染，可以写在任何地方，我们也无法获取到它。对于一个.vue文件来说，template中的HTML元素会作为虚拟dom被渲染，而template中的最外层div就是vue处理和识别的直接dom，如果有两个div，vue就不知道该识别哪一个。

9，vue的优点？

        答案：

        轻量级的渐进式框架，只关注视图层，不仅易于上手，还方便与第三方库和既有项目整合；

        组件化，保留了react组件化的优点，实现了HTML和js的封装和重用，在构建单页面应用方面有独特的优点；

        MVVM，视图，数据，结构分离，只要操作数据就可以改变视图，很直观；

        虚拟dom，操作真是dom非常的影响性能，虚拟dom极大地解决了该问题；