vue2.x学习笔记(三十二)
接着前面的内容: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学习笔记(三十二)的更多相关文章
- vue2.x学习笔记(十二)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...
- PHP学习笔记三十二【Exception】
<?php // $fp=fopen("a.txt","r"); // echo "ok"; if(!file_exists(&quo ...
- ObjectARX学习笔记(三十二)----怎样设置AcDbMText对齐方式
//_T("\\pxql;") 居左 //_T("\\pxqr;") 居右 //_T("\\pxqc;") 居中 //_T("\\ ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- VSTO 学习笔记(十二)自定义公式与Ribbon
原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
随机推荐
- 如何查看网页的header
1.例如打开要爬取的网页:https://www.zhihu.com/explore 2.按下F12,点击Network 3.刷新页面,点击explore 4.选取request headers,us ...
- 1006 Sign In and Sign Out (25 分)
At the beginning of every day, the first person who signs in the computer room will unlock the door, ...
- Shell:Day09-2.笔记
4.模式匹配(地址定界) 1.空值,没有定义,默认就将文件中所有的行,放入awk进行循环 2.对固定的 1,3 行进行操作 sed -n '1,3p' /etc/passwd awk '1,3 ...
- node.js代码二
var express = require('express'); var app = express(); var server = require('http').Server(app); var ...
- Vulnhub FristiLeaks靶机渗透
VM上配置 VMware users will need to manually edit the VM's MAC address to: 08:00:27:A5:A6:76 VM上选择本靶机,编辑 ...
- Docker的简介以及Dockerfile编写与使用
Docker的简介 Docker是在容器的基础上,进行了进一步的封装,极大的简化了容器的创建和维护.使得Docker技术比虚拟机技术更为轻便.快捷. 下面是两张对比图. 可以看到传统虚拟机技术是虚拟出 ...
- flask-类视图
flask-类视图 标准类视图 from flask import Flask, render_template, views, jsonify app = Flask(__name__) class ...
- redis 安装and对外开放端口
第一步: $ cd /usr/local/src $ wget http://download.redis.io/releases/redis-5.0.4.tar.gz $ tar xzf redis ...
- wireshark抓包实战(四),数据包的操作
1.标记数据包 当我们找到一个数据包感觉它很重要时,想要让它更明显怎么办呢?让它高亮即可! 具体操作: 选中某个条目,右键mark即可 2.为数据包添加注释 选中包以后,右键"分组注释&qu ...
- CentOS之crontab
1.crontab介绍 功能说明:设置计时器. 语 法:crontab [-u <用户名称>][配置文件] 或 crontab [-u <用户名称>][-elr] 补充说明:c ...