vue2和vue3的区别

原文地址：https://www.cnblogs.com/limou956259/p/17195546.html

1、双向数据绑定原理不同

• vue2：vue2的双向数据绑定是利用ES5的一个API：Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。
• vue3：vue3中使用了ES6的Proxy API对数据代理。相比vue2.x，使用proxy的优势如下：
• defineProperty只能监听某个属性，不能对全对象监听
• 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
• 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片

• vue2：vue2不支持碎片。
• vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。

3、API类型不同

• vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。
• vue3：vue3使用组合式api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

4、定义数据变量和方法不同

• vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。
• vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
• 从vue引入reactive；
• 使用reactive() 方法来声明数据为响应性数据；
• 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

5、生命周期钩子函数不同

　vue2中的生命周期：

• 　　beforeCreate 组件创建之前
• 　　created 组件创建之后
• 　　beforeMount 组价挂载到页面之前执行
• 　　mounted 组件挂载到页面之后执行
• 　　beforeUpdate 组件更新之前
• 　　updated 组件更新之后

vue3：vue3中的生命周期：

  setup 开始创建组件前

• 　　onBeforeMount 组价挂载到页面之前执行
• 　　onMounted 组件挂载到页面之后执行
• 　　onBeforeUpdate 组件更新之前
• 　　onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外，vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

6、父子传参不同

• 　　vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。
• 　　vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

• 　　vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。
• 　　vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

• 　　vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。
• 　　vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

关键词：

　　组合式api；proxy；支持碎片；组合式api；composition；生命周期；

二、vue3新增的响应式相关的函数

　　ref，reactive，readonly，computed，watch，watchEffect

关键词：

　　ref，reactive，readonly，computed，watch，watchEffect

三、ref的理解：

　　1）、功能：接受一个内部值，返回一个响应式的、可更改的 ref 对象，ref对象只有一个属性：value。

　　2）、使用ref对象：模板上不需要写 .value 属性（会自动解构），在js中，使用 .value 来完成数据的读写。

　　3）、ref接收基本类型和引用类型

　　ref可以接收基本类型。

　　ref也可以接收引用类型：如果将一个对象传给 ref函数，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

关键词：

　　value，响应式，

四、reactive的理解：

　　1）、功能： 接受一个对象，返回一个对象的响应式代理（proxy）。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹，因此不等于源对象，建议只使用响应式代理，避免使用原始对象。

响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

　　2）、注意点：当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。

关键词：

　　对象、proxy、深层、数组、Map

五、readonly

　　1）、功能：接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

　　2）、只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

关键词：

　　只读readonly

六、computed

功能：computed是计算属性。和选项式api中的计算属性实现的功能一样。

参数：

　　可以接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。

　　也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

七、watch

　　功能：侦听数据的变化，和选项式api中的watch实现的功能一样，组合式api中watch功能更加强大，灵活。默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

参数：

　　第一个参数：侦听器的源，可以是以下几种：

　　一个函数（返回一个值的函数）

　　一个 ref

　　一个响应式对象

　　...或是由以上类型的值组成的数组

　　第二个参数：在（第一个参数的值）发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在　　　　　　　　       副作用下一次重新执行前调用，可以用来清除无效的副作用，例如：等待中的异步请求。

　　当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

　　第三个参数：可选的， 是一个对象，支持以下这些选项：

　　immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。

　　deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。

关键词：

　　侦听，监听，副作用，immediate，deep，深度遍历，懒侦听

八、watchEffect

　　功能： watchEffect也是监听数据，但是它会立即运行一个函数，而不是懒侦听。watchEffect的侦听（依赖）的数据：watchEffect里使用了哪个数据，哪个数据就是　　　　watchEffect的依赖。

参数：

　　第一个参数：要运行的副作用函数。这个副作用函数的参数也是一个函数，注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如：等待中的异步请求。（和watch的第二个参数中回调函数的第三参数一样）。

　　第二个参数：可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。因为，侦听默认是在vue组件更新前调用，如果你希望组件更新后调用，可以把第二个参数传入：{ flush: 'post' }

　　返回值：用来停止该副作用的函数。

关键词：

　　侦听，监听，副作用，依赖，不是懒侦听

九、watch和watchEffect的区别

　　与 watchEffect() 相比，watch() 使我们可以：

　　懒执行副作用：watch是懒侦听执行的；watchEffect是首次就会执行

　　触发侦听器的来源：watch是明确知道由哪个依赖引起的侦听，watchEffect不明确

　　可以访问所侦听状态的前一个值和当前值：watch可以，watchEffect不可以。

关键词：

　　懒侦听、当前值、前一个值，新值，旧值

十、setup函数的参数

　　props：接收组件的属性，

　　context：上下文对象，包括 slots，attrs，emit，expose

关键词：

　　slots，attrs，emits，expose

十一、setup语法糖写法如何获取setup函数的参数：

• 　　setup函数的参数 setup语法糖
• 　　props ： defineProps
• 　　context.emit ： defineEmits
• 　　context.expose: defineExpose
• 　　context.slots： useSlots
• 　　context.attrs: useAttrs

关键词：

　　defineProps；defineEmits；defineExpose；useSlots；useAttrs；

十二、vue3和vue2生命周期的变化，以及compositionApi中的生命周期钩子函数

　　1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• 　　beforeDestroy改名为 beforeUnmount
• 　　destroyed改名为 unmounted

　　2、Vue3.0也提供了 Composition API 形式的生命周期钩子，Option API形式的钩子对应关系如下：

　　beforeCreate===>setup()

　　created=======>setup()

　　beforeMount ===>onBeforeMount

　　mounted=======>onMounted

　　beforeUpdate===>onBeforeUpdate

　　updated =======>onUpdated

　　beforeUnmount ==>onBeforeUnmount

　　unmounted =====>onUnmounted

关键词：

　　beforeUnmount；unmounted；onBeforeMount；onMounted；onBeforeUpdate；onUpdated；onBeforeUnmount；onUnmounted

十三、Vue3.X和vue2.X中的响应式原理分别是什么，区别是什么？

1、vue2.x的响应式

实现原理：

　　对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

　　数组类型：通过重写更新数组的一系列方法（如：push，pop等）来实现拦截。（对数组的变更方法进行了包裹）。

存在问题：

　　新增属性、删除属性, 界面不会更新。

　　直接通过下标修改数组, 界面不会自动更新。

2、Vue3.0的响应式

实现原理:

　　通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

　　通过Reflect（反射）: 对源对象的属性进行操作。

十四、vue3响应式数据的判断

• 　　isRef: 检查一个值是否为一个 ref 对象
• 　　isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• 　　isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• 　　isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

关键词：

　　isRef；isReactive；isReadonly；isProxy；

十五、reactive与ref的区别：

定义数据角度：

• 　　ref用来定义：基本类型数据。
• 　　reactive用来定义：对象（或数组）类型数据。
• 　　备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
• 　　原理角度：
• 　　ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
• 　　reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
• 　　使用角度：
• 　　ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
• 　　reactive定义的数据：操作数据与读取数据：均不需要.value。

关键词：

　　ref；reactive；Proxy；value；