vue3响应式数组（vue中实现响应式数据的原理）

本文目录一览：

• 1、vue3响应式数据原理
• 2、Vue2和Vue3的区别&&Vue3的组合式API
• 3、...在vue2中通过索引修改数组无法触发页面更新+vue3中是怎样解决的...
• 4、vue数组和对象的响应式实现

vue3响应式数据原理

1、很简单，直接Vue引入reactive方法，接收一个对象参数，就实现了数据的响应式：reactive 内部的核心代码 简化 如下：首先判断传入的参数类型是否可以用于观察，目前支持的类型为 Object|Array|Map|Set|WeakMap|WeakSet。

2、Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：reactive：接收一个参数，判断这参数是否是对象。

3、vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

Vue2和Vue3的区别&&Vue3的组合式API

vue2 的双向数据绑定是利用 ES5 的一个API Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。vue3 中使用了 ES6 的 Proxy API对数据代理。

vue2 是一个构造函数，通过new创建一个Vue实例 vue3是一个对象。

项目目录不同 vue-clio移除了config.文件夹。多了vue.config.js文件。新增了一个views文件夹。删除了static新增了public文件夹。index.html移动到public了。

...在vue2中通过索引修改数组无法触发页面更新+vue3中是怎样解决的...

还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名。有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。

解决方法：可以使用 Vue.set(object， key， value) 方法将响应属性添加到嵌套的对象上：也可以使用 this.$forceUpdate() 方法，可以局部更新 迫使Vue实例重新渲染。

如果不加这句话，json_data 改变，file_is_show先false，然后马上更新为true。而原本file_is_show就是true，所以DOM不会实现刷新。

Vue3 中是通过判断 target 是否存在该属性来区分是新增还是修改操作，需要借助一个工具方法 —— hasOwnProperty 。

在vue2中创建一个虚拟节点button，属性里面多了一个事件onclick，内容就是count++。

把academyList替换为新数组。官网文档“以下两种数据变化vue无法检测：1）通过索引修改值。2）改变数组长度。”。

vue数组和对象的响应式实现

Vue的响应式实现，便是通过使用Object。defineProperty来劫持各个属性的setter，getter，当数据变动时，派发更新函数，触发相应的watcher。

很简单，直接Vue引入reactive方法，接收一个对象参数，就实现了数据的响应式：reactive 内部的核心代码 简化 如下：首先判断传入的参数类型是否可以用于观察，目前支持的类型为 Object|Array|Map|Set|WeakMap|WeakSet。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。

整体来说， Vue3 相比于 Vue2 在很多方面都做了调整，数据的响应式只是冰山一角，但是可以看出尤大团队非常巧妙的利用了 Proxy 的特点以及 es6 的数据结构和方法。

在 Vue 中，这个桥梁是你看不见的，因为 Vue 都帮你完成了视图和数据的变化传递。而 React 就是侵入式的，因为要显式地声明 setState ，通过它，来设置变量的同时，设置视图的改变。

vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的push/pop/shift/unshift/splice/sort/reverse七个方法，其他数组方法及数组的使用则无法检测到。