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() {} });。

存在的问题

● 新增属性、删除属性、界面不会更新。 ● 直接通过下标修改数组，界面不会自动更新。

5、相关链接

1、掘金-Vue3和Vue2相比到底做了那些更新… 2、掘金-Vue2和Vue3对比总结梳理