浅析vue侦测数据的变化之基本实现

2024-07-31 06:12:42

一、Object的变化侦测

下面我们就来模拟侦测数据变化的逻辑。

强调一下我们要做的事情：数据变化，通知到外界（外界再做一些自己的逻辑处理，比如重新渲染视图）。

开始编码之前，我们首先得回答以下几个问题：

1.如何侦测对象的变化？

使用 Object.defineProperty()。读数据的时候会触发 getter，修改数据会触发 setter。
只有能侦测对象的变化，才能在数据发生变化的时候发出通知

2.当数据发生变化的时候，我们通知谁？

通知用到数据的地方。而数据可以用在模板中，也可以用在 vm.$watch() 中，地方不同，行为也不相同，比如这里要渲染模板，那里要进行其他逻辑。所以干脆抽象出一个类。当数据变化的时候通知它，再由它去通知其他地方。
这个类起名叫 Watcher。就是一个中介。

3.依赖谁？

通知谁，就依赖谁，依赖 Watcher。

4.何时通知？

修改数据的时候。也就是 setter 中通知

5.何时收集依赖？

因为要通知用数据的地方。用数据就得读数据，我们就可以在读数据的时候收集，也就是在 getter 中收集

6.收集到哪里？

可以在每个属性里面定义一个数组，与该属性有关的依赖都放里面

编码如下（可直接运行）：

// 全局变量，用于存储依赖
let globalData = undefined;

// 将数据转为响应式
function defineReactive (obj,key,val) {
    // 依赖列表
    let dependList = []
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        // 收集依赖（Watcher）
        globalData && dependList.push(globalData)
        return val
      },
      set: function reactiveSetter (newVal) {
        if(val === newVal){
            return
        }
        // 通知依赖项（Watcher）
        dependList.forEach(w => {
            w.update(newVal, val)
        })
        val = newVal
      }
    });
}

// 依赖
class Watcher{
    constructor(data, key, callback){
        this.data = data;
        this.key = key;
        this.callback = callback;
        this.val = this.get();
    }
    // 这段代码可以将自己添加到依赖列表中
    get(){
        // 将依赖保存在 globalData
        globalData = this;
        // 读数据的时候收集依赖
        let value = this.data[this.key]
        globalData = undefined
        return value;
    }
    // 数据改变时收到通知，然后再通知到外界
    update(newVal, oldVal){
        this.callback(newVal, oldVal)
    }
}

/* 以下是测试代码 */
let data = {};
// 将 name 属性转为响应式
defineReactive(data, 'age', '88')
// 当数据 age 改变时，会通知到 Watcher，再由 Watcher 通知到外界
new Watcher(data, 'age', (newVal, oldVal) => {
    console.log(`外界：newVal = ${newVal} ; oldVal = ${oldVal}`)
})

data.age -= 1 // 控制台输出： 外界：newVal = 87 ; oldVal = 88

在控制台下继续执行 data.age -= 1，则会输出 外界：newVal = 86 ; oldVal = 87。

附上一张 Data、defineReactive、dependList、Watcher和外界的关系图。

首先通过 defineReactive() 方法将 data 转为响应式（defineReactive(data, 'age', '88')）。

外界通过 Watcher 读取数据（let value = this.data[this.key]），数据的 getter 则会被触发，于是通过 globalData 收集Watcher。

当数据被修改（data.age -= 1）, 会触发 setter，会通知依赖（dependList），依赖则会通知 Watcher（w.update(newVal, val)），最后 Watcher 再通知给外界。

二、关于 Object 的问题

思考一下：上面的例子，继续执行 delete data.age 会通知到外界吗？

不会。因为不会触发 setter。请接着看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <section>
            {{ p1.name }}
            {{ p1.age }}
        </section>
    </div>
<script>
const app = new Vue({
    el: '#app',
    data: {
        p1: {
            name: 'ph',
            age: 18
        }
    }
})
</script>
</body>
</html>

运行后，页面会显示 ph 18。我们知道更改数据，视图会重新渲染，于是在控制台执行 delete app.p1.name，发现页面没有变化。这与上面示例中执行 delete data.age 一样，都不会触发setter，也就不会通知到外界。

为了解决这个问题，Vue提供了两个 API（稍后将介绍它们）：vm.$set 和 vm.$delete。

如果你继续执行 app.$delete(app.p1, 'age')，你会发现页面没有任何信息了（name 属性已经用 delete 删除了，只是当时没有重新渲染而已）。

注：如果这里执行 app.p1.sex = 'man'，用到数据 p1 的地方也不会被通知到，这个问题可以通过 vm.$set 解决。

三、Array 的变化侦测

3.1、背景

假如数据是 let data = {a:1, b:[11, 22]}，通过 Object.defineProperty 将其转为响应式之后，我们修改数据 data.a = 2，会通知到外界，这个好理解；同理 data.b = [11, 22, 33] 也会通知到外界，但如果换一种方式修改数据 b，就像这样 data.b.push(33)，是不会通知到外界的，因为没走 setter。请看示例：

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        console.log(`get val = ${val}`)
        return val
      },
      set: function reactiveSetter (newVal) {
        if(val === newVal){
            return
        }
        console.log(`set val = ${newVal}; oldVal = ${val}`)
        val = newVal
      }
    });
}

// 以下是测试代码 {1}
let data = {}
defineReactive(data, 'a', [11,22])
data.a.push(33)     // get val = 11,22               （没有触发 setter）    {2}
data.a              // get val = 11,22,33
data.a = 1          // set val = 1; oldVal = 11,22,33（触发 setter）

通过 push() 方法改变数组的值，确实没有触发 setter（行{2}），也就不能通知外界。这里好像说明了一个问题：通过 Object.definePropery() 方法，只能将对象转为响应式，不能将数组转为响应式。

其实 Object.definePropery() 可以将数组转为响应式。请看示例：

// 继续上面的例子，将测试代码（行{1}）改为：
let data = []
defineReactive(data, '0', 11)
data[0] = 22    // set val = 22; oldVal = 11
data.push(33)   // 不会触发                     {10}

虽然 Object.definePropery() 可以将数组转为响应式，但通过 data.push(33)（行{10}）这种方式修改数组，仍然不会通知到外界。

所以在 Vue 中，将数据转为响应式，用了两套方式：对象使用 Object.defineProperty()；数组则使用另一套。

3.2、实现

es6 中可以用 Proxy 侦测数组的变化。请看示例：

let data = [11,22]
let p = new Proxy(data, {
    set: function(target, prop, value, receiver) {
        target[prop] = value;
        console.log('property set: ' + prop + ' = ' + value);
        return true;
    }
    })
console.log(p)
p.push(33)
/*
输出：
[ 11, 22 ]
property set: 2 = 33
property set: length = 3
*/

es6 以前就稍微麻烦点，可以使用拦截器。原理是：当我们执行 [].push() 时会调用数组原型（Array.prototype）中的方法。我们在 [].push() 和 Array.prototype 之间增加一个拦截器，以后调用 [].push() 时先执行拦截器中的 push() 方法，拦截器中的 push() 在调用 Array.prototype 中的 push() 方法。请看示例：

// 数组原型
let arrayPrototype = Array.prototype

// 创建拦截器
let interceptor = Object.create(arrayPrototype)

// 将拦截器与原始数组的方法关联起来
;('push,pop,unshift,shift,splice,sort,reverse').split(',')
.forEach(method => {
    let origin = arrayPrototype[method];
    Object.defineProperty(interceptor, method, {
        value: function(...args){
            console.log(`拦截器: args = ${args}`)
            return origin.apply(this, args);
        },
        enumerable: false,
        writable: true,
        configurable: true
    })
});

// 测试
let arr1 = ['a']
let arr2 = [10]
arr1.push('b')
// 侦测数组 arr2 的变化
Object.setPrototypeOf(arr2, interceptor)    // {20}
arr2.push(11)       // 拦截器: args = 11
arr2.unshift(22)    // 拦截器: args = 22

这个例子将能改变数组自身内容的 7 个方法都加入到了拦截器。如果需要侦测哪个数组的变化，就将该数组的原型指向拦截器（行{20}）。当我们通过 push 等 7 个方法修改该数组时，则会在拦截器中触发，从而可以通知外界。

到这里，我们只完成了侦测数组变化的任务。

数据变化，通知到外界。上文编码的实现只是针对 Object 数据，而这里需要针对 Array 数据。

我们也来思考一下同样的问题：

1.如何侦测数组的变化？

拦截器

2.当数据发生变化的时候，我们通知谁？

Watcher

3.依赖谁？

Watcher

4.何时通知？

修改数据的时候。拦截器中通知。

5.何时收集依赖？

因为要通知用数据的地方。用数据就得读数据。在读数据的时候收集。这和对象收集依赖是一样的。
{a: [11,22]} 比如我们要使用 a 数组，肯定得访问对象的属性 a。

6.收集到哪里？

对象是在每个属性中收集依赖，但这里得考虑数组在拦截器中能触发依赖，位置可能得调整

就到这里，不在继续展开了。接下来的文章中，我会将 vue 中与数据侦测相关的源码摘出来，配合本文，简单分析一下。

四、关于 Array 的问题

// 需要自己引入 vue.js。后续也尽可能只罗列核心代码
<div id='app'>
        <section>
            {{ p1[0] }}
            {{ p1[1] }}
        </section>
</div>
<script>
const app = new Vue({
    el: '#app',
    data: {
        p1: ['ph', '18']
    }
})
</script>

运行后在页面显示 ph 18，控制台执行 app.p1[0] = 'lj' 页面没反应，因为数组只有调用指定的 7 个方法才能通过拦截器通知外界。如果执行 app.$set(app.p1, 0, 'pm') 页面内容会变成 pm 18。

以上就是浅析vue侦测数据的变化之基本实现的详细内容，更多关于vue侦测数据的变化的资料请关注我们其它相关文章！

vue实现tab切换的3种方式及切换保持数据状态

vue实现tab切换的3种方式一.v-show控制内容切换 1.简单版原理:用点击事件改变num值作为开关,控制tab样式和内容显示隐藏. 2.数据渲染原理:主要利用v-for绑定的index来控制,跟上面差不多. 二.组件切换. 1.知识点主要是vue中is的特性,和keep-alive缓存三.路由切换.(对地址栏和数据请求友好) 通过router-link实现. vue tab切换保持数据状态页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持ta
Antd-vue Table组件添加Click事件,实现点击某行数据教程

给Table组件添加Click事件,实现点击某行数据操作 customRow 设置行属性 Function(record, index) 通过customRow 属性给table添加自定义事件 <a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelec
基于vue+echarts数据可视化大屏展示的实现

获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
vue 获取到数据但却渲染不到页面上的解决方法

能获取到数据数据却渲染不到页面上问题描述: 我数据全部拿到了,js 里面写 console.log( musics ) 数据打印出来都正确,但是页面里面就是不显示. 很多时候对数据进行处理了,但是页面上就是没变化,没效果,用 console.log 打印数据都没问题,特别是数组.对象容易出现这个问题: 1. this.$set( xxx ) 保存变量 2.this.$forceUpdate( xxx ) 强制更新,迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不
vue实现两个组件之间数据共享和修改操作

我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件. 怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="hand
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变,组件中页面不渲染相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe
Vue组件传值过程中丢失数据的分析与解决方案

前言在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝.这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中.比如函数值,在深拷贝过程中,就会丢失. 问题在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据. 举例以基于 el-table 封装的 ak-table 组件
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示
vue基于Echarts的拖拽数据可视化功能实现

背景我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待....... 不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的
浅析vue侦测数据的变化之基本实现

目录一.Object的变化侦测二.关于 Object 的问题三.Array 的变化侦测 3.1.背景 3.2.实现四.关于 Array 的问题一.Object的变化侦测下面我们就来模拟侦测数据变化的逻辑. 强调一下我们要做的事情:数据变化,通知到外界(外界再做一些自己的逻辑处理,比如重新渲染视图). 开始编码之前,我们首先得回答以下几个问题: 1.如何侦测对象的变化? 使用 Object.defineProperty().读数据的时候会触发 getter,修改数据会触发 setter
Vue监听数据对象变化源码

监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长.当然,有些框架是采用的这种方式,不过他们用非常巧妙的算法提升性能,这不在我们的讨论范围之类. Vue 中数据对象的监视,是通过设置 ES5 的新特性(ES7 都快出来了,ES5 的东西倒也真称不得新)Object.defineProperty() 中的 set.get 来实现的. 目标与官方文档第一个例
vue如何使用watch监听指定数据的变化

目录使用watch监听指定数据的变化 vue watch监听多个值使用watch监听指定数据的变化在vue中,可以使用watch属性来监听data中某个属性值的变化. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'>
浅析Proxy可以优化vue的数据监听机制问题及实现思路

我们首先来看vue2.x中的实现,为简单起见,我们这里不考虑多级嵌套,也不考虑数组 vue2.x中的实现其本质是new Watcher(data, key, callback)的方式,而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //转换成可监听对象 function observe(data){ new Observer(d
稍微学一下Vue的数据响应式（Vue2及Vue3区别）

什么是数据响应式从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue
浅析 Vue 3.0 的组装式 API（一）

(一)响应式数据 1. 简单例子从最简单的数据绑定开始,在 Vue 2.0 中,我们这样将一个数据绑定到模板的指定位置: 在组件创建参数的 data 构造函数中返回一个用来绑定的数据对象,其中有个 now 字段,会被渲染到模板内的 .app > p 内. <template> <div class="app"> <h1>Hello world!</h1> <p>Now is: {{now.toString()}}<
vue.js数据响应式原理解析

目录 Object.defineProperty() 定义 defineReactive 函数递归侦测对象的全部属性流程分析 observe 函数 Observer 类完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数
详解vue的数据binding绑定原理

自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般
浅谈vue实现数据监听的函数 Object.defineProperty

在 ES5中新增了不少新的API, 例如新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param obj 要配置属性的某个对象 @param propname
浅析Vue自定义组件的v-model

最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双