vue深入响应式原理

现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以回避一些常见的问题。在这个章节，我们将进入一些 Vue 响应式系统的底层的细节。

如何追踪变化

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

检测变化的注意事项

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如：

var vm = new Vue({

data:{

a:1

}

})

// `vm.a` 是响应的

vm.b = 2

// `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

也有一些数组相关的问题，之前已经在列表渲染中讲过。

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值：

var vm = new Vue({

data: {

// 声明 message 为一个空值字符串

message: ''

},

template: '<div>{{ message }}</div>'

})

// 之后设置 `message`

vm.message = 'Hello!'

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问的属性不存在。

这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的概要，提前声明所有的响应式属性，可以让组件代码在以后重新阅读或其他开发人员阅读时更易于被理解。

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。

Object.defineProperty()
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，
并返回这个对象。“`

// 语法:

/*

* @param: obj:需要定义属性的对象;

*         prop:需要定义或修改的属性；

*         descriptor:将被定义或修改属性的描述符

*/

Object.defineProperty(obj,prop,descriptor)

对象里目前存在的属性描述符主要有两种形式： 数据描述符和存取描述符.

  • 数据描述符： 拥有可写或不可写值的属性*

可选键值：
configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除
enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
writable: 当且仅当该属性的值为true时，该属性才能被赋值运算符改变， 默认为false。
value： 该属性对应的值，可以是任意有效的javascript的值（数值，对象，函数等），默认为undefined

  • 存取描述符： 由一对getter-setter函数功能来描述的属性*

可选键值：
configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除
enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
get: 给属性提供getter的方法，如果没有 getter
则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该 方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined
set：设置属性值的方法， 如果没有 setter 则为
undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法

note：两者不能同时定义， 否则报错==

实例：

var a = {};

Object.defineProperty(a, 'b', {

set:
function(newValue) {

console.log('赋值操作, 赋值' + newValue);

},

get:
function() {

console.log('取值操作');

return
2;

}

});

a.b = 1;    // 赋值操作，赋值1

a.b;       // 取值操作2

虽然我将a.b的值设置成了1，但是因为我在get方法中始终返回了2，所以a.b的值一直是2。

那么，这就好玩儿了：我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，是不是很熟悉？是的，vue .js的核心思想就是这个。我们写个小例子：

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title>test</title>

</head>

<body>

<div
id="test">这是一个测试</div>

<script>

var view = document.getElementById("test");

var data = {};

var i=0;

Object.defineProperty(data, "b", {

set:
function(newValue) {

//当data.b的值改变的时候更新＃test的视图

view.textContent=newValue;

},

get: function() {

}

});

setInterval(function(){

i++;

data["b"]
= "data.b的值更新了，我要更新视图"+i;

},1000);

</script>

</body>

</html>

视图的变化过程：

刚开始：

data.b的值更新了，我要更新视图1;

1秒后：

data.b的值更新了，我要更新视图2

2秒后：

data.b的值更新了，我要更新视图3

Object对象有一个freeze的方法，用于实现对象属性和方法的不可更改

// 使用方法：

const arr = [1,2,3,4];

Object.freeze(arr);  // 变量arr不可更改

arr.push(5);  // 报错：不能添加属性

Object.definePropperty也可以实现规定变量的不可更改

const obj = { key: 'chris', vlaue: 'person'
}; Object.defineProperty(obj, 'key', { configurable: false, // 不可删除
writable: false, // 不可写 });

视图和数据变化绑定原理

对于一个html页面

<div>

<p>你好，<span
id='nickName'></span></p>

<div
id="introduce"></div>

</div>　　　　

设置一个数据的属性的getter和setter

//视图控制器

var
userInfo = {};

Object.defineProperty(userInfo,
"nickName", {

get: function(){

return
document.getElementById('nickName').innerHTML;

},

set: function(nick){

document.getElementById('nickName').innerHTML = nick;

}

});

Object.defineProperty(userInfo,
"introduce", {

get: function(){

return
document.getElementById('introduce').innerHTML;

},

set: function(introduce){

document.getElementById('introduce').innerHTML = introduce;

}

})

然后就能愉快地绑定数据交互了。

userInfo.nickName
= "xxx";

userInfo.introduce
= "我是xxx，我来自云南，..."

vue.js的数据变动原理

但是，这个例子只是数据和dom节点的绑定，而vue.js更为复杂一点，它在网页dom和accessor之间会有两层，一层是Wacher，一层是Directive，比如以下代码。

var a = {
b: 1 }

var vm =
new Vue({

data: data

})

把一个普通对象（a={b:1}）传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用Object.defineProperty 将它们转为 getter/setter,如图绿色的部分所示。

每次用户更改data里的数据的时候，比如a.b =1，setter就会重新通知Watcher进行变动，Watcher再通知Directive对dom节点进行更改。

vue 数据绑定实现的核心 Object.defineProperty()的更多相关文章

  1. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...

  2. vue原理之-神奇的Object.defineProperty

    vue2.0通过defineProperty进行数据双向绑定 例如:(他接受三个参数,都是必填!) var a= {} Object.defineProperty(a,"b",{ ...

  3. vue双向数据绑定的原理-object.defineProperty() 用法

    有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...

  4. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  5. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

  6. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  7. 双向数据绑定实现之Object.defineProperty

    vue.js利用的是es5的 defineproperty 特性实现的双向数据绑定,了解一下基本原理. 举例 var person= {}; Object.defineProperty(person, ...

  8. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  9. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

随机推荐

  1. 【Java每日一题】20170223

    20170222问题解析请点击今日问题下方的“[Java每日一题]20170223”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  2. SpringBoot数据库集成-Mybatis

    一.java web开发环境搭建 网上有很多教程,参考教程:http://www.cnblogs.com/Leo_wl/p/4752875.html 二.Spring boot搭建 1.Intelli ...

  3. 谈谈你对 Java 平台的理解

    声明 本篇所涉及的提问,正文的知识点,全都来自于杨晓峰的<Java核心技术36讲>,当然,我并不会全文照搬过来,毕竟这是付费的课程,应该会涉及到侵权之类的问题. 所以,本篇正文中的知识点, ...

  4. 中国最强AI超级服务器问世，每秒提供AI计算2000万亿次

    https://mp.weixin.qq.com/s/1EVczHp11OJ4GEjeE3z5cA 业内唯一以“AI计算”为核心的人工智能大会昨天发布了一份重要报告. 9月12日,<中国AI计算 ...

  5. 人工智能改进传统云ERP的10种方法

    http://blog.itpub.net/31542119/viewspace-2168809/ 随着数字化转型的进程加快,企业开始重新评估ERP的作用.传统ERP经过多年僵硬化定制过于追求生产的一 ...

  6. OkHttp3源码详解(六) Okhttp任务队列工作原理

    1 概述 1.1 引言 android完成非阻塞式的异步请求的时候都是通过启动子线程的方式来解决,子线程执行完任务的之后通过handler的方式来和主线程来完成通信.无限制的创建线程,会给系统带来大量 ...

  7. 操作系统-进程通信（信号量、匿名管道、命名管道、Socket）

    进程通信(信号量.匿名管道.命名管道.Socket) 具体的概念就没必要说了,参考以下链接. 信号量 匿名管道 命名管道 Socket Source Code: 1. 信号量(生产者消费者问题) #i ...

  8. 数组去重（JS）

    数据类型: (栈类型) 原始值:boolen,num,string,null,undefined (堆类型) 引用值:object,array 首先重新定义一个type()函数, <script ...

  9. (其他)Thinkpad笔记本装系统

    电脑城装一次系统收你40元,不如自己装系统. 虽然百度上装系统的文章泛滥,但是还是自己尝试. 前3个小时thinkpad e570是不是坏掉了,怎么就进不去BIOS,这个时候直接搜索这个型号,问题输入 ...

  10. python Kmeans算法解析

    一. 概述 首先需要先介绍一下无监督学习,所谓无监督学习,就是训练样本中的标记信息是位置的,目标是通过对无标记训练样本的学习来揭示数据的内在性质以及规律.通俗得说,就是根据数据的一些内在性质,找出其内 ...