自用Vue面试题

created 在模板渲染成html前调用。此时可以访问data中的数据，可以调用methods中的方法，可以通过computed和watch完成数据计算。 mounted 在模板渲染成html后调用

Vue生命周期的定义 Vue实例从创建到销毁的过程就是Vue的生命周期，即指从创建、初始化数据、编译模板、挂载DOM→渲染、更新→渲染、卸载等一系列的过程。 Vue生命周期的阶段 它一共分四个阶段，不

MVVM的优点 实现了Model和View的分离，降低了代码耦合、提⾼了逻辑或视图的复⽤性。 实现了⾃动更新DOM：利⽤双向绑定，数据更新后视图⾃动更新，让开发者从繁琐的⼿动操作DOM中解放出来。 提

Vue.js是采用数据劫持结合发布订阅模式的方式，通过Object.defineProperty()方法来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者和触发相应的监听回调。主

computed支持缓存，只有依赖的数据发生变化才会重新计算；watch不支持缓存，数据变化时它就会触发相应的操作。 computed不支持异步，当computed中有异步操作时，无法监听数据的变化；

在对一些属性进行操作时，使用这种方法无法拦截。如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为Object.defineProperty()不能拦截到这些操作。更精确的来

当一个Vue实例创建时，Vue会遍历data中的属性，用Object.defineProperty（vue3.0使用proxy）将每一个属性身上绑定一个getter和setter，并且在内部追踪相关依

开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。由于数据的获取、页面的渲染、对用户事件的响应在内的应用逻辑都混合在一起，在开发简单项目时，可能看不出什么问题；如

相同点 在vue中v-if(不含v-else)和v-show的作用效果是相同的，都能控制元素在页面是否显示：当表达式为true的时候，都会占据页面的位置；当表达式为false的时候，都不会占据页面位置

相同点 methods和computed最终结果相同。 不同点 computed会进行缓存,多次使用会观察有没有变化：没有变化就直接返回原有结果，不会重新调用，有变化会重新调用一次；methods每次

--- theme: Chinese-red --- ![（自用面试题）v-model的实现原理是什么？.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u

组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，initData时会将其作为工厂函数返回全新data对象，有效规避多实例对象之间数据污