Vue2.x的响应式原理
Vue2.x
中响应式的实现是通过Object.defineProperty
来完成的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
let data = []
let _name = '李白'
Object.defineProperty(data, 'name', {
get() {
return _name
},
set(newValue) {
_name = newValue
console.log(newValue);
}
})
</script>
</body>
</html>
在浏览器中查看数据
将数据显示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p></p>
<p></p>
</div>
<script>
let data = { name: '李白', age: 18 }
Object.keys(data).forEach(key => {
defineReactiveProperty(data, key, data[key])
})
function defineReactiveProperty(data, key, value) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
value = newValue
document.querySelector('#app p').innerHTML = data.name
}
})
}
document.querySelector('#app p').innerHTML = data.name
</script>
</body>
</html>
页面会跟随数据的改变而改变
声明式操作操作多个视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="name"></p>
<p v-text="age"></p>
</div>
<script>
let data = { name: '李白', age: 18 }
Object.keys(data).forEach(key => {
defineReactiveProperty(data, key, data[key])
})
function defineReactiveProperty(data, key, value) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
value = newValue
compile()
}
})
}
function compile() {
let app = document.querySelector('#app')
const nodes = app.childNodes
nodes.forEach(node => {
console.log(node);
// 筛选出了元素节点
if (node.nodeType === 1) {
// 获取节点的属性
const attrs = node.attributes
Array.from(attrs).forEach(attr => {
console.log(attr);
const nodeName = attr.nodeName
const nodeValue = attr.nodeValue
if (nodeName === 'v-text') {
node.innerHTML = data[nodeValue]
}
})
}
})
}
compile()
</script>
</body>
</html>
页面也会跟随数据的变化而变化
发布订阅模式
$on实现事件的注册,而且可以注册多个事件
Observer
Observer
的功能
- 负责把
data
选项中的属性转换成响应式数据 data
中的某个属性也是对象,把该属性转换成响应式数据(例如data
中的某个属性为Student
对象,也要将Student
对象中的属性转换成响应式)- 数据变化发送通知
Compiler
- 负责编译模板,解析指令/差值表达式
- 负责页面的首次渲染
- 当数据变化后重新渲染视图
Compiler主要就是对DOM进行操作
对响应式的个理解
通过Object.defineProperty, Vue 在初始化数据时,会传入一个data对象,内部会默认的对data对象进行遍历,使用 Object.defineProperty 重新定义所有属性,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通 知相关依赖进行更新操作。
为什么要使用Object.defineProperty
可以使数据的获取和设置增加一个拦截的功能,我们可以在获取和设置的时候增加一些我们自己的逻辑,这个逻辑叫做依赖收集。比如我们取数据的时候可以收集一些依赖,过一会数据变化了可以告诉这些收集的依赖去更新。