VUE 面试题-CSDN博客

本文深入解析Vue.js的关键特性，包括MVVM原理、响应式数据机制、数组变动检测等，并对比v-if与v-show的区别，详述组件生命周期及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

如果哪里不正确欢迎指出问题，我会积极改正的。

【vue 在初始化数据时候，会给 data 中的属性使用 Object.defineProperty 重新定义所有属性，当页面渠道对应的属性时，会进行依赖收集（收集当前组件的 watcher ），如果属性发生变化会通知相关历来进行更新操作。】

vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组的 api 时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次进行监控。

1、computed 和 method 区别：

computed 必须有返回值（通过对数据处理返回一个结果）， method 则均可
模板中调用时，computed 不加 ()，methods 必须加 ()
computed 有缓存功能，methods 没有缓存（computed 初次调用会执行函数，然后会缓存结果。再次被调用时候，如果依赖的响应式数据未发生改变，则返回缓存结果；发生改变，则会再次执行函数并缓存结果。 methods 被调用的时每次都要执行函数）

2、computed 和 watch 区别

3、watch 和 methods 区别

理解：当用户指定 watch 中的 deep 属性为 true 时，如果当前监控的值时数组类型，会对对象中的每一项进行求值，此时会将当前 watcher 存入到对应的属性的依赖中，这样数组中的对象发生变化时也会通知数据更新。

创建-加载-更新-销毁

beforeCreate: 实例刚在内存中被创建，还未初始化好 data 和 methods 属性，可以进行ajax请求；
created: 实例已在内存中创建完成，data 和 methods 已经创建好，但还没有开始编译末班，如果调用 methods 中的方法或者操作 data 中的数据，最早只能在此中操作；
beforeMount: 完成模板编译，但还没有挂载到页面中；
mounted: 实例已经挂载完成，可以进行一些 DOM 操作；
beforeUpdate: data 值是新的，但是页面显示数据还是旧的，此时没有开始重新渲染DOM节点；
updated: 可以执行依赖于DOM的操作，该钩子在服务器渲染阶段不可调用（因为在大多数情况下，此期间更改状态会导致无限循环；
beforeDestory: 此时，实例还未销毁，完全可用；（当前页面使用了 $on 方法，需要在组件销毁前解绑；清除自己定义的定时器，解除事件绑定）
distoryed: 可以执行一些优化操作，清空定时器，解除绑定事件(调用后，vue 实例指示的所有东西都会解除绑定，所有事件监听器都会被溢出，所有子实例都会被销毁)。