双向数据绑定
将DOM与Vue实例的data数据绑定到一起，彼此间互相影响。
- 数据的变化会引起DOM的改变
- DOM的改变也会引起数据的变化
原理
当把一个普通的Javascript对象传入Vue实例作为data选项时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty( )来把每个属性转为setter和getter。这些setter和getter对用户来说不可见，但是在内部会让Vue能够追踪依赖，在属性被访问和修改时通知变更。
每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后，当依赖项的sette触发时，会通知watcher，从而使它关联的组件重新渲染。
什么是响应式：简单来说，当你的数据发生变化时，视图也进行相应的更新。
响应式数据
只有data中的数据（程序创建时data里的属性）才是响应式的，动态添加进来的数据默认为非响应式的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id ="app">
<p>{{stu}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data: {
stu: {
name:"Jona",
age:19
}
}
})
vm.stu.width = "666";
Vue.set(vm.stu,"gender","male");
</script>
</body>
</html>
此时，如果在console中修改stu.width的值，视图不会发生更新。
这主要因为，data中的属性，Vue会把它通过Object.defineProperty()修改转成setter和getter，因此当修改时，会点用属性的setter方法，实现视图立即更新。而对于非响应式数据，即动态添加的，由于在Vue中，DOM的更新是异步的，因此视图不会立即更新。
添加响应式数据的方式
- 使用Vue.set(object, key, value)
- 主要适用于添加单个属性
- 也可以使用vm.$set()实例方法
- 使用Object.assign()
- 主要使用添加多个
- eg: vm.stu = Object.assign({}, vm.stu, {width:120, height:100})
异步DOM更新
Vue在更新DOM时是异步更新的。只要侦听到数据变化，Vue会开启一个队列，并缓冲在同一事件循环中所有的数据变更。如果一个watcher被多次触发，只会被推入队列中一次。这样会去除重复数据以避免不必要的计算和DOM操作。在下一个事件循环“tick”中，Vue会刷新队列并执行实际（已去重的）工作。Vue在内部对异步队列尝试使用原生的Promise.then( ), MutationObserver和 setImmediate , 如果执行环境不支持，则会采用setTimeout(fn , o)代替。
例如，当设置vm.someData = "new value"，该组件不会立即进行重新渲染。当刷新队列时，组件会在下一个事件循环"tick"中更新。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。在组件内使用 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) // => '已更新'
})
}
}
})
Event Loop
js是单线程语言，即所有任务需要排队，一个任务只有等到前一个任务执行完毕之后才能执行。如果钱一个任务需要花费大量时间，后一个任务就不得不一直等待。
一些时候，当执行IO操作等这些耗时，但却未占用CPU的任务时，如果等当前耗时等待的任务执行完之后再执行下一个任务，会带来效率上的问题，而且也不友好。因此，设计者把这些等待中的任务挂起，从而可以执行后续任务。等挂起的任务有结果了，再把挂起的任务执行下去。
于是，js中的任务分为两种：同步任务和异步任务。
- 同步任务：在主线程上排列执行的任务，按顺序排列执行，一个任务只有前一个任务执行完毕之后才会执行。
- 异步任务：不进入主线程，而进入“任务队列”的任务。只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
异步任务执行机制
- 所有同步任务都在主线程上执行，形成一个执行栈。
- 主线程之外还有一个“任务队列”。只要异步任务有了结果，就在任务队列中放置一个事件。
- 执行栈中的同步任务执行完毕后，系统就会读取任务队列。那些对应的异步任务，就结束了等待状态，进入执行栈，开始执行。
- 主线程不断重复以上过程。
事件和回调函数
任务队列是一个事件的队列，IO设备完成一项任务就会在任务队列中添加一个事件，表示相应的任务可以进入执行栈了。这些事件，除了IO事件，还包括用户事件。
只要指定过回调函数，这些事件发生时就会进入任务队列，等待主线程读取。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
在任务队列中的任务进入主线程时，主线程首先要检查执行时间，因为对于setTimeout(),setTimeIntervel()这类定时器，只有到了规定时间才能返回主线程。
console.log("1");
setTimeout(function(){
console.log("2")
});
(function(){
console.log("3");
setTimeout(function(){
console.log("4");
},1000)
})();
console.log("5");
console.log("6");
(function(){
console.log("7");
setTimeout(function(){
console.log("8");
})
})();
在这里插入图片描述
这里的2, 4, 8 均在任务队列中，当执行栈中的任务执行完之后，由于对2没有设置推迟时间，且它在队列的最前端，因此先打印2。队列中第二个，由于设置了1000ms，而8没有设置推迟时间，因此先打印8，等到了1000ms时才会打印4。
任务队列
任务队列分为microtask 和 macortask，通常称为微任务和宏任务。
- 执行的优先级： 主线程任务 > micortask > macrotask
- macrotask有：setTimeout, setTimeInterval , setImmediate等
- microtask有：Promise, MutationObserver等
Vue的nextTick
Vue在内部尝试对异步队列使用原生的setImmediate Promise.then和MessageChannel，如果当前执行环境不支持，就采用setTimeout(fn, 0)代替。
在这里插入图片描述
每次执行栈的同步任务执行完毕，就会去任务队列中取出完成的异步任务，队列中又分为microtasks queues和宏任务队列等到把microtasks queues所有的microtasks都执行完毕,注意是所有的,他才会从宏任务队列中取事件。等到把队列中的事件取出一个，放入执行栈执行完成，就算一次循环结束，之后event loop还会继续循环，他会再去microtasks queues执行所有的任务，然后再从宏任务队列里面取一个，如此反复循环。
console.log(1);
setTimeout(function(){
console.log(2)
});
console.log(3);
new Promise((resolve, reject) => {
console.log(4);
resolve()
}).then(() => {
console.log(5)
}).then(() => {
console.log(8)
show()
})
function show()
{
console.log(9);
setTimeout(function(){
console.log(10)
});
console.log(11);
new Promise((resolve, reject) => {
console.log(12);
resolve()
}).then(() => {
console.log(13)
})
}
setTimeout(function() {
console.log(6)
})
console.log(7)
}
在这里插入图片描述
也就是说，Vue会把里面的数据变更(非data中的属性)通过Promise.then等方法加入到任务队列中， vue中的nextTick 也会加入到任务队列中，因此，在 nextTick之前的数据变更可以在nextTick中访问到变更后的数据
网友评论