vue入门讲解day05

最新推荐文章于 2024-05-28 16:27:21 发布

进阶的前端工作者

最新推荐文章于 2024-05-28 16:27:21 发布

阅读量77

点赞数

分类专栏： vue入门 js的分享文章标签： js vue

本文链接：https://blog.csdn.net/weixin_45846177/article/details/103743101

版权

vue入门同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

js的分享

11 篇文章 0 订阅

订阅专栏

响应式原理

vue的响应式原理：Object.defineProperty()（数据劫持）

    <script>
        let defaultV = 'tom';
        let obj = {};
        Object.defineProperty(obj,'name',{
            get(){
                console.log('get...');
                // return defaultV;
                return 'lili';
            },
            set(){
                console.log('set....');
                defaultV = "lucy"
            }
        });
        console.log(defaultV);//tom
        obj.name="0";//这边obj的name(key值),随便设置什么,defaultV的值都会变成set()里设置的lucy
        console.log(defaultV);//lucy
        console.log(obj.name);//此时obj的name(key值),变为get()的return值
    </script>

在这里插入图片描述
结果可以看一下。

下面来实际试一下，首先页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        let _value = '';
        let data = {};
        Object.defineProperty(data,'value',{
            get(){
                return _value
            },
            set(value){
                console.log('新值:',value);
                _value = value;//获取更新劫持到的value值
                document.querySelector('#h4Dom').innerHTML = _value;//将新的value值给h4
            }
        })
        function changeValue(newValue){
            data.value = newValue;//不停的更新对象data的value值
        }
    </script>
</head>
<body>
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" id="inputDom" oninput="changeValue(this.value)">
    </div>
</body>
</html>

在这里插入图片描述
如上，页面h4标签内的值，在随着我在input框中输入的值再改变，这就实现了简单的数据劫持。vue中数据双向绑定也是用了这个原理

进阶的前端工作者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门讲解day05

响应式原理vue的响应式原理：Object.defineProperty()（数据劫持） <script> let defaultV = 'tom'; let obj = {}; Object.defineProperty(obj,'name',{ get(){ cons...
复制链接

扫一扫