vue双向绑定原理

最新推荐文章于 2024-07-31 23:47:49 发布

小莉爱编程

最新推荐文章于 2024-07-31 23:47:49 发布

阅读量159

点赞数 1

分类专栏：面试文章标签： js vue

本文链接：https://blog.csdn.net/qq_45018844/article/details/119174670

版权

面试专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文详细解析了Vue中如何使用Object.defineProperty实现双向数据绑定，通过设置getter和setter，监听输入变化并实时更新视图。关键步骤包括数据劫持、setter处理输入值和getter触发视图更新。

摘要由CSDN通过智能技术生成

vue双向绑定原理

- 对每个vue中的data中定义的属性循环Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

我们先认识一下Object.defineProperty
认识Object.defineProperty

再根据它写一个简单版的双向绑定，接着开始分析，分析都在注释里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue双向绑定原理</title>
</head>
<body>
<h1>vue双向绑定原理</h1>
<input type="text" id="_txt">
<p id="p_id"></p>
</body>
<script>
	//声明一个对象
    let Person = {}
    //给对象添加一个属性
    Object.defineProperty(Person,'name',{
        get() {
            console.log('getgetget')
            return 'gggg'
        },
        set(v) {
        //3.这里就是给input框和p标签绑定值的步骤，这样就实现了双向绑定
            document.getElementById('_txt').value = v
            document.getElementById('p_id').innerHTML = v
            console.log(v)
        }
    })
    //写入时触发set
    Person.name = '000'
    //读取时触发get
    console.log(Person.name)
    //1.给键盘绑定一下监听，可以打印e看一下，找到我们输入的值的位置
    //2.那么这一步就可以理解何曾写入触发的set，那么那个v就是我们传入的值，
    document.addEventListener('keyup',function (e) {
        // console.log(e.target.value)将对象的属性赋值
        Person.name = e.target.value
    })
</script>
</html>