Vue3.X和Vue2.X相比到底做了哪些更新

Posted 2021-12-23 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3.X和Vue2.X相比到底做了哪些更新相关的知识，希望对你有一定的参考价值。

1、setup函数

♠ setup是Vue3.X中的一个新配置，值为一个函数。
♥ 组件中所有用到的属性（变量）、方法（函数）等，都要在setup里面配置。
♣ setup函数的两种返回值
壹-若是返回对象，则对象中的属性、方法，在模板中可以直接使用。
贰-若是返回一个渲染函数，则可以自定义渲染内容。
♦ 注意点
壹-尽量不要与Vue2.X配置混用。Vue2.x配置中可以访问到setup中的属性、方法。但是在setup中不能访问到Vue2.x里面的配置。
贰-如果有重名，setup优先。
叁-setup不能是一个async函数，因为返回值不再是return的对象，而是Promise对象，模板看不到return对象中的属性值。后期也可以返回一个Promise实列，但是需要Suspense和异步组件配合。

2、ref函数

♠ 作用
ref是Vue3.X的响应式核心。
♥ 语法
const count = ref(1);
壹-创建一个包含响应式数据的引用对象，即reference对象，简称 : ref对象。
贰-JavaScript中操做数据的方式为xxx.value即可。
叁-模板中读取数据只需要xxx即可。
♣ 备注
壹-接收的数据可以是基本类型、也可以是对象类型。
贰-基本类型的数据，响应式依然使用Object.defieProperty()的get和set来实现。
叁-对象类型的数据，内部借助Vue3.X中的一个新函数reactive来实现。
肆-Vue3.X把ES6中的Proxy封装到了reactive函数里面继续使用。

3、reactive函数

♠ 作用是定义了一个对象类型的响应式数据类型。基本数据类型不要用它，要用ref函数。
♥ 语法是const = reactive(源对象)，接收一个对象或者数组，返回一个代理对象，即Proxy的实列对象。
♣ reactive定义的响应式数据是深层次的响应式数据。
♦ 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据实现。

4、响应式原理

4.1、Vue3.X

实现原理

● 通过Prxoy(代理)，拦截对象中任意属性的变化，包括属性值的读写、属性的添加与删除等。
● 通过Refiect(反射)，对被代理对象的属性进行操作。
● 移步到MDN中可以看到Proxy和Reflect的详解。

4.2、Vue2.X

实现原理

● 对象类型通过Object.defineProperty()对属性的读取、修改进行拦截，即数据劫持。
● 数组类型通过重写更新数组的一系列方法来实现拦截，即对数组的变更方法进行了包裹或重写。
● Object.defineProperty(data, 'count', get() , set() );。

存在的问题