首页 / VUE / vue 快速入门系列 —— 侦测数据的变化 - [基本实现]

vue 快速入门系列 —— 侦测数据的变化 - [基本实现]

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 快速入门系列 —— 侦测数据的变化 - [基本实现]，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8034字，纯文字阅读大概需要12分钟。

内容图文

其他章节请看：

vue 快速入门系列

侦测数据的变化 - [基本实现]

在初步认识 vue 这篇文章的 hello-world 示例中，我们通过修改数据（app.seen = false），页面中的一行文本（现在你看到我了）就不见了。

这里涉及到 Vue 一个重要特性：响应式系统。数据模型只是普通的 JavaScript 对象，当我们修改时，视图会被更新。而变化侦测是响应式系统的核心。

Object的变化侦测

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

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

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

如何侦测对象的变化？
- 使用 Object.defineProperty()。读数据的时候会触发 getter，修改数据会触发 setter。
- 只有能侦测对象的变化，才能在数据发生变化的时候发出通知
当数据发生变化的时候，我们通知谁？
- 通知用到数据的地方。而数据可以用在模板中，也可以用在 vm.$watch() 中，地方不同，行为也不相同，比如这里要渲染模板，那里要进行其他逻辑。所以干脆抽象出一个类。当数据变化的时候通知它，再由它去通知其他地方。
- 这个类起名叫 Watcher。就是一个中介。
依赖谁？
- 通知谁，就依赖谁，依赖 Watcher。
何时通知？
- 修改数据的时候。也就是 setter 中通知
何时收集依赖？
- 因为要通知用数据的地方。用数据就得读数据，我们就可以在读数据的时候收集，也就是在 getter 中收集
收集到哪里？
- 可以在每个属性里面定义一个数组，与该属性有关的依赖都放里面

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

// 全局变量，用于存储依赖
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和外界的关系图。

vue 快速入门系列 —— 侦测数据的变化 - [基本实现] - 文章图片

首先通过 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 的变化侦测

背景

假如数据是 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()；数组则使用另一套。

实现

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 数据。

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

如何侦测数组的变化？
- 拦截器
当数据发生变化的时候，我们通知谁？
- Watcher
依赖谁？
- Watcher
何时通知？
- 修改数据的时候。拦截器中通知。
何时收集依赖？
- 因为要通知用数据的地方。用数据就得读数据。在读数据的时候收集。这和对象收集依赖是一样的。
- {a: [11,22]} 比如我们要使用 a 数组，肯定得访问对象的属性 a。
收集到哪里？
- 对象是在每个属性中收集依赖，但这里得考虑数组在拦截器中能触发依赖，位置可能得调整

就到这里，不在继续展开了。接下来的文章中，我会将 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 快速入门系列 —— 侦测数据的变化 - [基本实现]所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1021769.html

来源：【匿名】

【上一篇】vue 【下一篇】php怎么返回数据给vue

更多 ►

【vue 快速入门系列 —— 侦测数据的变化 - [基本实现]】教程文章相关的互联网学习教程文章

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定【代码】

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8 9<script src=" https://cdn.jsdelivr.net/npm/vue"></script>10</head>1112<body>13<div id="app">14<h4>{{msg}}</h4>1516<!-- <input type="t...

第二章 Vue快速入门--10-11 跑马灯效果制作【代码】

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8 910<script src=" https://cdn.jsdelivr.net/npm/vue"></script>1112</head>1314<body>1516<div id="app">17<input type="button" value="浪...

Vue快速入门-1-Vue的简单使用【代码】

小生博客：http://xsboke.blog.51cto.com如果有疑问,请点击此处,然后发表评论交流,作者会及时回复。-------谢谢您的参考，如有疑问，欢迎交流目录:1. 简单的将数据渲染到DOM 2. Vue的"v-"指令 3. "v-if"指令的使用 4. "v-for"指令的使用 5. Vue的事件处理 6. "v-model:value"实现双向数据绑定 7. Vue实现逆转字符串 8. Vue 动态添加class属性,以及三目运算. 9. "v-bind:style"指令定义内联样式 10. 指令支持数组 11. Vue实例各个生...

Vue.js简易安装和快速入门详解【图】

本文主要为大家详细介绍了Vue.js简易安装和快速入门的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。1 简易安装要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。 <head><meta charset="UTF-...

Vue.js快速入门的图文代码详解【图】

vuejs是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。今天给大家分享一篇教程关于Vue.js 60分钟快速入门教程，一起看看吧vuejs是当下很火的一个Javascript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据...

Vuex 快速入门(简单易懂)【图】

一、vuex介绍（1）vuex是什么？ 1. 借鉴了Flux、Redux、 The Elm Architecture 2. 专为 Vue.js 设计的状态管理模式 3. 集中式存储和管理应用程序中所有组件的状态 4. Vuex 也集成到 Vue 的官方调试工具 5. 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。（2）什么情况下我应该使用 Vuex？ 1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。 2. ...

Vue.js简易安装和快速入门（第二课）【图】

上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。 1 简易安装要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。 <head><meta charset="UTF-8"><title>简易安装 Vue.js</title><script src="vue.js"></script> </head> 官网提供了Vue.js源码下载的地方：https://cdn.jsdelivr.ne...

vue-router 学习快速入门

vue-router 快速入门配置路由 $ npm install vue-router --save routes.js import Home from ./pages/Home.vue import Gifs from ./pages/Gifs.vue import User from ./pages/User.vueexport const routes = [{ path: , component: Home },{ path: /gifs, component: Gifs },{ path: /user/:id, component: User }//指定路由和对应要渲染的组件//404的path应该是*,要放在最末尾，当前面的都匹配不到时才匹配到404页面//this.$rout...

快速入门Vue【图】

一、什么是Vue？ Vue.js（读音 /vju?/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。如果你是有经验的前端开发者...

详解Vue.js——60分钟组件快速入门（上篇）【图】

组件简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。由于组件的篇幅较大，我将会把组件的入门知识分为两篇来讲解，这样也便于各位看官们快速消化。组件的创建和注册基本步骤 Vue.js的组件的使用有3个步骤：创建...

Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。一、基本结构 index.html代码： <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> app.js代码： new Vue({ el: #app...

VueES6JadeScssWebpackGulp快速入门资源【图】

一直以来非常庆幸曾经有翻过《代码大全2》；这使我崎岖编程之路少了很多不必要的坎坷。它在软件工艺的话题中有写到一篇：“首先是为人写程序，其次才是机器(Write Programs for People First, Computers Second)”。虽然这是针对代码可读性来谈及的，但这间接昭示了开发效率之重要不是？此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套强大组合来改善团队前端工作流，首因即出于这个理念。 Vue ES6 Jade Scss Webpa...

vue 快速入门系列 —— 侦测数据的变化 - [vue 源码分析]【代码】

其他章节请看： vue 快速入门系列侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来，配合上文（侦测数据的变化 - [基本实现]）一起来分析一下 vue 是如何实现数据侦测的。 Tip: 以下代码出自 vue.esm.js，版本为 v2.5.20。无关代码有一些删减。中文注释都是笔者添加。/*** Define a property.* 定义属性的方法*/function def (obj, key, val, enumerable) {Object.defineProperty(obj, key, {value: ...

Hello JavaScript ——5.1 Vue快速入门【代码】

Vue Vue是一款渐进式的js框架，所谓渐进式就是逐步实现新特性的意思，比如实现模块化开发、路由、状态管理等新特性，其特点是综合了Angular(模块化)和React(虚拟Dom)的优点SOC原则(关注点分离)HTML + SCSS + JS：视图层给用户看的，或者刷新后台发送来的数据 {{}} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>HelloWorld!</title> </head> <body><div id="app">{{message}}</div...