vue双向数据绑定原理

zhu_hangfeng

已于 2022-04-24 11:57:14 修改

阅读量741

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-04-24 11:55:56 首次发布

本文链接：https://blog.csdn.net/zhu_hangfeng/article/details/124378559

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何利用JavaScript的Object.defineProperty方法实现数据劫持，通过监听对象属性的变化，实现实时更新视图的效果。示例中展示了在input输入框和h1元素中同步更新msg属性的过程，并详细解释了get和set方法的用法。

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

使用Object.defineProperty实现数据劫持

Object.defineProperty(目标对象，目标对象属性，配置对象)三个参数

 <input type="text" placeholder="请输入内容" oninput="inputChange()">
 <h1></h1>

var input = document.querySelector('input')
var h1 = document.querySelector('h1')
//目标对象
var obj = {
    msg:'hhhhhh'
}
input.value = obj.msg
h1.innerHTML = obj.msg

//input框输入事件，修改obj中msg属性的值
function inputChange(){
        obj.msg = input.value
    }

let newMsg = obj.msg

Object.defineProperty(obj,'msg',{
        // configurable:true,//可删除的
        // enumerable:true,//可枚举的
        // wrifable:true,//可修改的

        get(){
            console.log('读取了')
//注意不能直接返回obj上的msg属性，否则陷入死循环，所以上面let了一个newMsg 进行返回
            return newMsg 
        },
        set(value){
        //把读取的值改为最新值
            newMsg = value
        //把h1的内容改为最新值
            h1.innerHTML = value
        //input框内的值改为最新
            input.value =value
            console.log('修改了,值为：',value)
        }
    })