Vue.js响应式

不想懂得~

于 2021-10-20 11:30:50 发布

阅读量76

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/m0_60802403/article/details/120862695

版权

本文通过示例展示了如何利用JavaScript的Object.defineProperty方法监听数据的get和set操作，实现在Vue中类似Vue VDOM的数据更新机制。通过设置data属性的setter和getter，当数据变化时更新视图，并在input元素的onchange事件中实现数据的双向绑定。

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

1.通过Object.defineProperty监听数据的get,set来做一些我们想去做的事情(像是vue vdom数据更新的updateComponent)

2.将data属性代理到了vm上

3.代码演示

<!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>
    <p id="p1"></p>
    <input type="text" id="input1" name="input1">
</body>
<script>
    var p1=document.getElementById('p1')
    var input1=document.getElementById('input1')
    var obj={
        name:'数据'
    }
    p1.innerHTML=obj.name
    input1.value=obj.name
    Object.defineProperty(obj,'name',{
        set(newdata){
            p1.innerHTML=newdata
            console.log(111);
        },
        get(newdata){
            console.log(222);
        }
    })
    input1.onchange=function(){
        obj.name=input1.value
    }
</script>
</html>

不想懂得~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js响应式

1.通过Object.defineProperty监听数据的get,set来做一些我们想去做的事情(像是vue vdom数据更新的updateComponent)2.将data属性代理到了vm上3.代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
复制链接

扫一扫