vue2生命周期面试题（vue2的生命周期函数）

大家好，我是讯享网，很高兴认识大家。

一. 根节点不同

vue2中必须要有根标签。

vue3中可以没有根标签，会默认将多个根标签包裹在一个虚拟标签中，有利于减少内存。

二. 组合式API和选项式API

在vue2中采用选项式API，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。

在vue3中采用组合式API，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。

三. 生命周期的变化

创建前：beforeCreate -> 使用setup()
创建后：created -> 使用setup()
挂载前：beforeMount -> onBeforeMount
挂载后：mounted -> onMounted
更新前：beforeUpdate -> onBeforeUpdate
更新后：updated -> onUpdated
销毁前：beforeDestroy -> onBeforeUnmount
销毁后：destroyed -> onUnmounted
异常捕获：errorCaptured -> onErrorCaptured
被激活：onActivated 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行

四.v-if和v-for的优先级

在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费

在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层

五.diff算法不同

vue2中的diff算法

讯享网

遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。用patch记录的消息去更新dom

缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录变更新。（React则是将更新放入队列后集中处理）。

vue3中的diff算法

在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。

六. 响应式原理不同

vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。

vue3通过proxy代理的方式实现。

proxy的优势：不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。

当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升

总结

更快的渲染性能：

Vue3 相比 Vue2 来说，Vue3 重写了虚拟实现，编译模板的优化，更高效的组件初始化。

更小的体积：

Vue 3 的运行时核心相比 Vue 2 更小，这意味着更小的打包体积，减少了前端加载时间。
Tree-shaking 支持：Vue 3 代码更容易被 Tree-shaking 优化，因此可以更好地剔除不需要的代码。

更好的 TypeScript 支持：

Vue 3 的代码库已经全面采用 TypeScript 重写，提供了更好的类型推断和类型提示。
提供了更多的内置类型声明，使得开发时更容易发现代码错误和调试。

更灵活的组合式 API：

Vue 3 引入了组合式 API，使得组件的逻辑可以更好地组织和复用。
组合式 API 提供了更直观、更灵活的方式来组织组件代码，使得代码更易读、易维护。

更好的响应式系统：

Vue 3 使用了 Proxy 来重写响应式系统，相比 Vue 2 的 Object.defineProperty，更加直观和强大。
在 Vue 3 中，可以在更深的层次上追踪响应式变量的变化，使得开发者能够更准确地监听数据变化。

核心概念1:

就是Vuex中的公共的状态, 我是将看作是所有组件的, 用于保存所有组件的公共数据.

核心概念2: Getters

我将属性理解为所有组件的属性, 也就是计算属性的官方文档也是说到可以将理解为的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

核心概念3: Mutations

我将理解为中的, 对象中保存着更改数据的回调函数,该函数名官方规定叫, 第一个参数是, 第二参数是, 也就是自定义的参数.

const store = new Vuex.Store({  state:{    products: [     {name: ‘鼠标’, price: 20},     {name: ‘键盘’, price: 40},     {name: ‘耳机’, price: 60},     {name: ‘显示屏’, price: 80}   ] },  getters:{    saleProducts: (state) =&gt; {      let saleProducts = state.products.map( product =&gt; {        return {          name: product.name,          price: product.price / 2       }     })      return saleProducts;   } },  mutations:{ //添加mutations    minusPrice (state, payload ) {      let newPrice = state.products.forEach( product =&gt; {        product.price -= payload     })   } } })

讯享网

核心概念4: Actions

类似于，不同在于：

提交的是而不是直接变更状态

中可以包含异步操作, 中绝对不允许出现异步

中的回调函数的第一个参数是,是一个与实例具有相同属性和方法的对象

核心概念5: Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，对象就有可能变得相当臃肿。为了解决以上问题，允许我们将分割成模块。每个模块拥有自己的甚至是嵌套子模块——从上至下进行同样方式的分割

讯享网css复制代码 const moduleA = {  state: { … },  mutations: { … },  actions: { … },  getters: { … } }  const moduleB = {  state: { … },  mutations: { … },  actions: { … } }  const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB } })  store.state.a // -&gt; moduleA 的状态 store.state.b // -&gt; moduleB 的状态

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：  <!-- 这会抛出一个错误，因为属性 todo 此时 没有在该实例上定义 --> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo.name }} </li> 在外先包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：  <template v-for="todo in todos">  <li v-if="!todo.isComplete">    {{ todo.name }}  </li> </template>

这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。