Vue 3.x中响应式原理
与Vue2.x响应式原理比较
- 使用ES6中新增的Proxy代理对象实现
- 直接监听对象,而非属性 (不需要循环,性能提升)
- ES6中新增,IE不支持,性能由浏览器优化
实现原理
<!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>defineProperty</title>
</head>
<body>
<div id="app">
hello
</div>
<script>
let data = {
msg: 'hello',
count: 10
}
let vm = new Proxy(data, {
get(target, key) {
console.log('get, key', key, target[key]);
return target[key];
},
set(target, key, newValue) {
console.log('set, key: ', key, newValue);
if (target[key] === newValue) {
return;
}
target[key] = newValue;
document.querySelector('#app').textContent = target[key];
}
})
vm.msg = 'Hello World';
console.log(vm.msg);
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f54b7b921f51df8d1fb536fb7ab2ad65.png)
ES6对象设置访问代理器–Proxy
Vue中的数据驱动、数据响应式核心原理、Vue 2.x中响应式原理