Vue中的响应系统及虚拟DOM树笔记
2019-11-06 本文已影响0人
海的那一边
Vue和DOM的对比：
直接使用DOM实现点击一个按钮时数字加1的功能，需要先找到触发点击操作的元素，然后绑定事件处理函数，在函数中查找要修改的变量，然后再修改变量。
使用Vue，则不需要去找到触发点击操作的元素，也不需要在函数中查找要修改的变量，这些都是Vue帮忙做的。
new Vue类似于一个快递员，负责名为#app的小区的快递派送工作，data类似快递员的库房，new Vue将data中的数据派送给#app中的对应元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>welcome</p>
<button id="btn">0</button>
<p>welcome again</p>
</div>
<script>
let btn = document.getElementById("btn");
btn.onclick = function () {
let btn = this;
let n = btn.innerHTML;
n++;
btn.innerHTML = n;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>welcome</p>
<button @click="change">{{n}}</button>
<p>welcome again</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
n:0
},
methods:{
change(){
this.n++;
}
}
}
)
</script>
</body>
</html>
Vue中的响应系统及虚拟DOM树：
image.png
响应系统：
实时监控data中的变量变化，并能在变量发生变化时，自动发出通知。new Vue()自动给data中的每个变量添加的访问器属性，这些访问器属性直接监控/保护data中的变量，访问器属性中的set方法，都内置了通知机制，如果试图修改data中的变量，都会通过访问器属性，从而会触发通知。vue中的data对象都被强行添加了defineProperties属性。
虚拟DOM树：
vue内存中仅保存可能变化的DOM元素和可能变化的属性的简化版DOM树。
为什么要虚拟的DOM树？真实的DOM中无关数据太多，遍历查找速率太低。虚拟的DOM树仅包含可能变化的元素及属性，所以遍历快。
虚拟DOM树形成：
new Vue()时，传入了el:"#app"参数，new Vue()找到#app父元素，扫描其内部的子元素，边扫描边创建虚拟DOM树，保存可能变化的DOM元素和可能变化的属性，首次将data中的变量赋值给{{}}中的变量。
变量变化时：
触发这个变量的访问器set方法，通知虚拟DOM树，new Vue()开始遍历DOM树找到可能变化的元素和属性，利用已封装好的DOM树的增删改查方法，修改元素及属性。
