接着前面的内容:https://www.cnblogs.com/yanggb/p/12684060.html

深入响应式原理

vue最独特的特性之一,是其非侵入式(耦合度低)的响应式系统:数据模型仅仅是普通的javascript对象,当你修改它们的时候,视图会自动进行更新。这一特性使得状态管理非常简单直接,不过理解其工作原理同样重要,因为这样你才可以避开一些常见的问题。因此在这里研究下vue响应式系统的底层实现细节。

vue是如何追踪变化的

当你把一个普通的javascript对象传入vue实例作为data选项,vue将会遍历此对象所有的属性,并使用【Object.defineProperty】把这些属性全部转为getter/setter(所谓的数据劫持)。【Object.defineProperty】是es5中一个无法shim的特性,这就是vue不支持ie8及更低版本浏览器的根本原因。

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

而每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把"接触"过的数据属性记录为依赖。之后当依赖项的setter触发的时候,就会通知watcher,从而使它关联的组件重新渲染。

检测变化的注意事项

由于javascript本身的限制,vue并不能检测数组和对象的变化。尽管如此,我们还是可以想到一些别的方法来回避这些限制并保证它们的响应性。

对于对象

vue无法检测property的添加或移除。由于vue会在初始化实例的时候对属性执行getter/setter转化,所以属性必须在data对象上存在才能让vue将它转换为响应式的。例如:

var vm = new Vue({
data:{
a:1
}
}) // vm.a是响应式的 vm.b = 2
// vm.b是非响应式的

对于已经创建的实例,vue不允许动态添加根级别的响应式属性。但是,可以使用【Vue.set(object, propertyName, 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不能检测以下数组的变动:

1.当你利用索引直接设置一个数组项的时候,例如:vm.items[indexOfItem] = newValue。

2.当你修改数组的长度时,例如:vm.items.length = newLength。

举个例子:

var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以实现和vm.items[indexOfItem] = newValue相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

而为了解决第二类问题,你可以使用splice()方法:

vm.items.splice(newLength)

这是因为,splice()是一个变异方法,vue对其做了相应的包裹处理。

声明响应式属性

由于vue并不允许动态地添加根级响应式属性,因此你必须在初始化实例前声明所有根级响应式属性,哪怕只是一个空值(一个萝卜一个坑,先占个位保平安):

var vm = new Vue({
data: {
// 声明message为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置message
vm.message = 'Hello!'

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

这样的限制在背后其实是有其技术原因的:它消除了在依赖项跟踪系统中的一类边界情况,也使vue实例能够更好地配合类型检查系统工作。但与此同时,在代码可维护性方面也有一点重要的考虑:data对象就像组件状态的结构(schema),提前声明所有的响应式属性,可以让组件代码在未来修改或给其他开发/维护人员阅读时更易于理解。

异步更新队列

可能你还没有注意到,vue在更新dom的时候是异步执行的。只要侦听到数据变化,vue将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和dom操作是非常重要的。然后,在下一个事件循环【tick】中,vue刷新队列并执行实际(已去重)工作。vue在内部对异步队列尝试使用原生的【Promise.then】、【MutationObserver】和【setImmediate】,如果执行环境不支持,则会采用【setTimeout(fn, 0)】代替。

例如,当你设置vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列的时候,组件会在下一个事件循环【tick】中更新。多数情况下,我们并不需要关心这个过程,但是如果你想要基于更新之后的dom状态来做些什么,这就可能会有点棘手。虽然vue通常鼓励开发人员使用【数据驱动】的方式思考,避免直接接触dom,但是有些时候我们是必须要这么做的。为了在数据变化之后等待vue完成更新dom的操作,可以在数据变化之后立即使用【Vue.nextTick(callback)】。这样,回调函数将会在dom更新完成之后被调用。

<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})

而在组件内使用【vm.$nextTick()】实例方法特别方便,因为它不需要全局Vue,并且回调函数中的this将自动绑定到当前的vue实例上:

Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // '已更新'
})
}
}
})

因为【$nextTick()】返回的是一个Promise对象,所以你可以使用新的es207中提供的async/await语法来完成同样的事情:

methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // '已更新'
}
}

这里将【$nextTIck()】的执行放到了同步的环境中(await修饰符),因此后续的代码是在dom更新完成之后才执行的。

"我还是很喜欢你,像留白于水墨丹青,不留痕迹。"

vue2.x学习笔记(三十二)的更多相关文章

  1. vue2.x学习笔记(十二)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...

  2. PHP学习笔记三十二【Exception】

    <?php // $fp=fopen("a.txt","r"); // echo "ok"; if(!file_exists(&quo ...

  3. ObjectARX学习笔记(三十二)----怎样设置AcDbMText对齐方式

    //_T("\\pxql;") 居左 //_T("\\pxqr;") 居右 //_T("\\pxqc;") 居中 //_T("\\ ...

  4. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  5. VSTO 学习笔记(十二)自定义公式与Ribbon

    原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  9. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  10. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

随机推荐

  1. Python 程序慢的像蜗牛,我该怎么办?

    1. “一猿小讲”的风格就是多元化,偶尔会真情吐露一下程序猿的内心:偶尔也结合自己的经历畅聊一些经验杂谈:其中也不乏幽默风趣的技术故事.分享是件快乐的事情,工作之余,有时间我就尽力多码字,多推几篇文章 ...

  2. Prism+MaterialDesign+EntityFramework Core+Postgresql WPF开发总结 之 中级篇

    本着每天记录一点成长一点的原则,打算将目前完成的一个WPF项目相关的技术分享出来,供团队学习与总结. 总共分三个部分: 基础篇主要争对C#初学者,巩固C#常用知识点: 中级篇主要争对WPF布局与Mat ...

  3. 用curl调用https接口

    今天在windows下用curl类获取微信token一直返回false,查阅资料后,发现是https证书的锅,在curl类中加上这两条,问题瞬间解决. curl_setopt($ch, CURLOPT ...

  4. javascript 入门 之select2功能大全

    1.代码较为简单,不作太多讲解,新建一个javascript工程,在index.htl中编写如下代码,根据<link>和<script>标签配制好js和css库便可! < ...

  5. 【C#】写一个支持多人聊天的TCP程序

    碎碎念 先谈谈我们要实现的效果:客户端可以选择要聊天的对象,或者直接广播消息(类似QQ的私聊和群消息) 那么,该如何实现呢? 首先明确的是,要分客户端和服务器端两个部分(废话) 客户端:选择要发送的对 ...

  6. Docker php安装扩展步骤详解

    前言 此篇,主要是演示docker-php-source , docker-php-ext-install ,docker-php-enable-docker-configure 这四个命令到底是用来 ...

  7. CentOS 配置OOM监控报警

    由于程序设计不合理或者瞬间高并发访问时,很有可能会触发OOM(Out of memory),这里指的是操作系统级别的OOM.具体什么是OOM,以及怎样发生这里不在赘述,因为笔者认为这是IT从业工作者的 ...

  8. (一) Mybatis源码分析-解析器模块

    Mybatis源码分析-解析器模块 原创-转载请说明出处 1. 解析器模块的作用 对XPath进行封装,为mybatis-config.xml配置文件以及映射文件提供支持 为处理动态 SQL 语句中的 ...

  9. Delphi学习手记——单引号和双引号的区别

    单引号和双引号的区别 双引号表示其中字符可能包含变量,而单引号表示整个引号内的东西都当成字符串来处理. 也就是说:没有内设变量就用单引号'',有就用双引号"". 举例说明: $va ...

  10. Personal Photo Experience Proposal

      Background:             Our smart phones are the most widely-used cameras now, more and more photo ...