Vue3响应式原理
Vue3响应式原理基于ES6的Proxy对象实现的
文章目录
vue3的响应式原理是基于ES6的Proxy对象
一、知识储备：Proxy对象
proxy字面意思是代理器，主要用于改变对象的默认访问行为。通过在访问对象之前增加一层拦截，只要对对象访问行为都会通过这层拦截，在拦截中，我可以自定义一些行为。
Proxy的基本语法：
const proxy = new Proxy(target, handler)
proxy实际上是一个构造函数，接收两个参数，一个是目标对象target，另一个是配置对象handler，用来定义拦截的行为。
proxy、target和handler之间的关系是什么样的呢？
我们通过实例去理解他们之间关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const data = {
msg1: '内容',
arr: [1, 2, 3],
obj: {
name: 'william',
age: 18
}
}
const p = new Proxy(data, {
get (target, property, receiver) {
console.log(target, property, receiver)
return target[property]
},
set (target, property, value, receiver) {
console.log(target, property, value, receiver)
target[property] = value
}
})
</script>
</body>
</html>
get()函数内3个参数：target等于data；property就是获取属性：p.arr；receiver就是实例p，那么target[property] 就是data[“arr”]
set()函数内有4个参数：target等于data；property就是给data对象设置的属性名，比如p.arr，那么property就是"arr"；value就是设置的新值，比如p.arr=[4,5,6]，那么value就是[4,5,6]；receiver就是实例p。
当我们访问p实例时，就会自动触发get函数并返回data[“arr”]；当我们给p实例设置值时，就会自动触发set函数。
我们总结一下proxy、target、handler之间的关系
通过Proxy构造函数可以生成实例proxy，任何对proxy实例的属性的访问都会自动转发至target对象上，我们可以针对访问的行为配置自定义的handler对象，因此外界通过proxy访问target对象的属性时，都会执行handler对象自定义的拦截操作。
二、Proxy实现Vue3基础演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">原始内容</div>
<script>
const data = {
msg: 'hello',
content: 'world',
arr: [1, 2, 3],
obj: {
name: 'william',
age: 18
}
}
const vm = new Proxy(data, {
get (target, key) {
return target[key]
},
set (target, key, newValue) {
// 数据更新
target[key] = newValue
// 视图更新
document.querySelector('#app').textContent = target[key]
}
})
</script>
</body>
</html>
target指向data，key指向data的key，newValue设置data[key]的值。此处没有更深次的操作，也就是修改arr/obj内部元素时，无法响应式更新视图。