vue3双向绑定原理

QYY159818

已于 2023-10-12 11:40:00 修改

阅读量758

点赞数

文章标签： javascript 前端开发语言

于 2023-09-26 21:03:41 首次发布

本文链接：https://blog.csdn.net/weixin_45917727/article/details/133323951

版权

vue3双向数据绑定

相较于vue2通过Object.defineProperty()进行双向数据绑定，vue3通过proxy进行双向数据绑定，proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等），可以通过使用ref和reactive对数据实现响应式

const p = new Proxy(target, handler)

参数

proxy有两个参数，target是要代理的目标对象，可以是任意类型的是对象，handler是一个函数，表示在执行各种操作时代理的行为

 let proxy = new Proxy(obj, {
        get:(target, prop, receiver)=>{},
        set:(target, prop, value, receiver)=>{}
    })

handler有两个方法，get和set，表示在读取和修改该对象时触发的函数

get有三个参数，target是代理的对象，prop是代理的目标的属性，receiver是proxy或者继承proxy的对象，通常是proxy

set有四个参数，其中三个与get相同，value是给属性设定的新值

实现简单双向数据绑定

对proxy的修改会触发get和set劫持，但是对obj的修改并不会被监听到

<body>
    <h2 id="app"></h2>
  <input id="input" type="text" />
</body>

let app = document.getElementById('app')
let input = document.getElementById('input')

let obj = { // 源数据
  text:'hello world'
}

let proxy = new Proxy(obj, {
  set: function(target, prop, value){ // input事件触发进行劫持，触发update方法
    target[prop] = value
    update(value)
  }
})

function update(value){ // update方法用于同步dom更新
    app.innerHTML = value
    input.value = value
}

input.addEventListener('input',function(e){ // 监听input数据变化，并修改proxy的值
  proxy.text = e.target.value
})

proxy.text = obj.text // 初始化源数据

10.12更新
vue3并不是完全抛弃了defineProperty，通过reactive定义的响应式数据使用proxy包装出来，而ref还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式

QYY159818

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3双向绑定原理

get有三个参数，target是代理的对象，prop是代理的目标的属性，receiver是proxy或者继承proxy的对象，通常是proxy。proxy有两个参数，target是要代理的目标对象，可以是任意类型的是对象，handler是一个函数，表示在执行各种操作时代理的行为。handler有两个方法，get和set，表示在读取和修改该对象时触发的函数。对proxy的修改会触发get和set劫持，但是对obj的修改并不会被监听到。set有四个参数，其中三个与get相同，value是给属性设定的新值。
复制链接

扫一扫