Vue2/Vue3 响应式原理
Posted X可乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2/Vue3 响应式原理相关的知识，希望对你有一定的参考价值。
Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同
Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现
Vue 3.x 响应式基于 ES6 的 Proxy 实现
Vue 2 响应式原理
- Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现
- 设置 data 后，遍历所有属性，转换为 Getter、Setter，从而在数据变化时进行试图更新等操作
基础效果
var obj =
name: 'GD',
age: 18
var num = 'nan'
Object.defineProperty(obj, 'sex',
get ()
console.log(1)
return num
,
set (nVal)
console.log(2)
num = nVal
)
改进
- 上述版本只是雏形，问题如下：
- 操作中只坚挺了一个属性，多个属性无法处理
- 无法监听数组变化（Vue 中同样存在）
- 无法处理属性也为对象的情况
- 改进
<!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">初始内容</div>
<script>
let data =
msg: 'hello',
age: 18,
arr: [1, 2, 3, 4, 5],
obj:
name: 'hh',
age: 1888
;
let vm = ;
// 封装为函数用于对数据进行响应式处理
const createReactive = (function ()
const arrMethodName = ['push', 'pop']
const customProto =
customProto.__proto__ = Array.prototype
arrMethodName.forEach(method =>
customProto[method] = function ()
const result = Array.prototype[method].apply(this, arguments)
document.querySelector('#app').textContent = this
return result
)
// 需要进行数据劫持的主体功能，也是递归时需要的功能
return function (data, vm)
Object.keys(data).forEach(key =>
if (Array.isArray(data[key]))
data[key].__proto__ = customProto
else if (typeof data[key] === 'object' && data[key] !== null)
vm[key] =
createReactive(data[key], vm[key])
return
Object.defineProperty(vm, key,
enumerable: true,
configurable: true,
get()
console.log('访问成功')
return data[key]
,
set(newValue)
data[key] = newValue
document.querySelector('#app').innerHTML = data[key]
)
)
)()
createReactive(data, vm)
</script>
</body>
</html>
Vue 3 响应式原理
Vue 3.x 与 Vue 2.x 的区别为数据响应式是通过 Proxy 实现的，其他相同
porxy 回顾
const data =
msg: 'hello',
arr: [1, 2, 3],
obj:
name : 'GD',
age: 18
const newP = new Proxy(data,
get (target, property, receiver)
console.log(target)
console.log(property)
console.log(receiver)
return target[property]
,
set (target, property, value, receiver)
console.log(target)
console.log(property)
console.log(value)
console.log(receiver)
return target[property] = value
)
proxy 实现
<!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">初始内容</div>
<script>
const data =
msg: 'hello',
arr: [1, 2, 3],
obj:
name: 'GD'
const vm = new Proxy(data,
get (target, key)
return target[key]
,
set (target, key, newValue)
target[key] = newValue
document.querySelector('#app').innerHTML = target[key]
)
</script>
</body>
</html>
以上是关于Vue2/Vue3 响应式原理的主要内容，如果未能解决你的问题，请参考以下文章