Vue响应式(vue响应式数组)

qiaoqingyi 2023-05-23 351

默认

Vuejs 是一个流行的 JavaScript 框架，它的核心是基于响应式原理实现的这意味着当数据发生变化时，Vue 会自动更新相关的界面元素Vue 响应式原理的核心是通过使用 ObjectdefineProperty 函数来劫持对象的属性来实现的在 Vue 中；vue2响应式原理由 Observer 类， Dep 类和 Watcher 类互相调用实现， Observer 类是把一个普通的object类变成每一层都能相应的类， Dep 类的作用是添加，移除，通知和收集订阅者， Watcher 类是订阅者，主要功能是把当。

我们将更新的功能封装了一个watcher 渲染页面前，会将当前的watcher 放到dep类中在vue中页面渲染时使用的属性，需要进行依赖收集，收集对象的渲染watcher 取值时，给每个属性都加了dep属性，用于存储这个渲染watcher，同一个；vue响应式数据原理是利用ObjectdefineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图Vue的响应式实现，便是通过使用ObjectdefineProperty来劫持各个属性的setter，getter。

Vue3 中响应式核心方法就是 reactive 和 effect ，其中 reactive 方法是负责将数据变成响应式， effect 方法的作用是根据数据变化去更新视图或调用函数，与 react 中的 useEffect 有点类似~其大概用法如下；当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Objectdefinproperty劫持数据后vue会查找当前属性有无依赖项既被wa。

vue中的map是响应式的Vue追踪不到Set的变化，但是可以追踪到mySetChangeTracker的变化，所以当Set发生改变后，手动改变mySetChangeTracker的值就能让Vue知道我的数据发生了变化在mySetAsList里面写入varx=。

vue响应式数组

数组通过经过vue二次封装的push，unshift，pop，shift，sort，reverse，splice可以实现数组中数据的响应式，通过索引增删改查vue是不响应的或者使用vuesetvm$set对象通过vuesetvm$set。

vue2中ObjectdefineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理我们知道，会改变数组本身的方法只有7个sort， push， pop， slice， splice， shift， unshift，所以可以通过重写这些方法来达到数组响应式解。

obj对象里面的每一个属性，都会采用ObjectdefineProperty去封装，实现响应式所谓响应式，指的是，数据发生变化后，页面自动更新给对象，后添加的数据不会采用ObjectdefineProperty去封装，所以，就失去了响应式vue通过 $。

视图更新原理其原理就是vue的响应式更新dom的原理，m = v m是数据，也就是在vuerouter install时在根组件root vue component添加了_route属性，在匹配到对应路由后更新了_route属性值，继而触发了该属性值的。

if target_isVue ob obvmCount ！== #39production#39 warn #39Avoid adding reactive properties to a Vue instance or its root $data #39 + #39at runtime declare it upfront in。

vue响应式基本原理是基于ObjectdefinePropertyobj，prop，descriptor，descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法可以收集依赖，设置属性值时触发set方法更新依赖Vue最独特的特性之一，是其非。

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

2不能监听数组的变化 vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的pushpopshiftunshiftsplicesortreverse七个方法，其他数组方法及数组的。