Vue.js 面试题解析：生命周期、数据响应式、组件通讯等

Vue.js 面试题专版 本资源摘要信息涵盖了 Vue.js 相关的多个知识点，包括 watch 和 computed 的区别、Vue 生命周期、父组件和子组件生命周期钩子执行顺序、数据响应式、Vuex 等。 1._watch 和 computed 的区别_ watch 是监听动作，computed 是计算属性。watch 没有缓存，只要数据变化就执行，而 computed 有缓存，只在属性变化的时候才去计算。watch 可以执行异步操作，而 computed 不能。watch 常用于一个数据影响多个数据，computed 则常用于多个数据影响一个数据。 2._Vue 生命周期_ Vue 生命周期可以分为创建期间、运行期间和销毁期间三个阶段。 创建期间： * beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 * created：实例已经在内存中创建 OK，此时 data 和 methods 已经创建 OK，此时还没有开始编译模板 * beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 * mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 运行期间： * beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染 DOM 节点 * updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ 销毁期间： * beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 * destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 3._Vue 父组件和子组件生命周期钩子执行顺序_ 加载渲染过程： * 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程： * 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 父组件更新过程： * 父 beforeUpdate -> 父 updated 销毁过程： * 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed 4._数据响应式_ Vue 的数据响应式是通过 Object.defineProperty 或 Proxy 实现的。在 Vue 2.x 中使用 Object.defineProperty，而在 Vue 3.0 中使用 Proxy。Proxy 相比 Object.defineProperty 有很多优势，例如可以更好地支持数组和对象的响应式。 5._Vuex_ Vuex 是 Vue 官方提供的一个状态管理器。它可以帮助我们更好地管理应用程序的状态。Vuex 可以提供响应式的数据，并且可以帮助我们解决组件之间的通信问题。 6._Vuex 的优势_ 使用 Vuex 管理数据相比直接在全局 window 下定义变量有很多优势。例如，Vuex 可以提供响应式的数据，可以帮助我们更好地管理应用程序的状态，並且可以解决组件之间的通信问题。 7._Vuex 的原理_ Vuex 的原理是通过 Vue 的响应式系统来实现的。它可以将数据变换为响应式的数据，并且可以帮助我们更好地管理应用程序的状态。 8._Vue 模板渲染的原理_ Vue 模板渲染的原理是通过将模板编译成渲染函数，然后将渲染函数执行生成最终的 HTML。渲染函数可以访问组件的数据和方法，从而可以动态地生成 HTML。 9._其他知识点_ * v-if 和 v-show 的区别：v-if 是真正的条件渲染，而 v-show 是通过 CSS 的 display 属性来控制元素的显示和隐藏。 * 在列表组件中添加 key 属性的作用：可以帮助 Vue 更好地复用 DOM 节点，从而提高性能。 * 为什么不建议用 index 作为 key 呢？：因为 index 可能会变化，从而导致 Vue 无法正确地复用 DOM 节点。 * this.$emit 的返回值是什么？：this.$emit 的返回值是 undefined。 * filter 中的 this 是什么？：filter 中的 this 是当前组件的实例对象。