数据响应 vue2 $set和vue3 reactive

vue 里面常用的就是数据响应，理解原理才是最重要的。下面是介绍，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。vue2和vue3的不同实现方式手动实现数据响应，练习vue2的 Object.defineProperty，代码如下：案例思路：在input框中输入内容，p标签显示input框输入的内容<!DOCTYPE html&gt

tengyuxin

1283人浏览 · 2022-04-12 08:46:44

tengyuxin · 2022-04-12 08:46:44 发布

vue 里面常用的就是数据响应，理解原理才是最重要的。

下面是介绍，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

vue2和vue3的不同实现方式

手动实现数据响应，练习vue2的 Object.defineProperty，代码如下：

案例思路：在input框中输入内容，p标签显示input框输入的内容

<!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>
    <div id="app">
        <p class="result"></p>
        <input type="text" name="" class="ipt1">
    </div>
</body>

<script>
    class Test {
        constructor() {
            this.result = document.getElementsByClassName('result')[0];
            this.ipt1 = document.getElementsByClassName('ipt1')[0];
            this.data = this.defineData();
        }
        init() {
            //添加input事件
            this.ipt1.addEventListener('input', this.handleInput.bind(this), false);
        }
        defineData() {
            let _obj = {};
            let name = '';
            let age = '';
            
            Object.defineProperties(_obj,{
                name:{
                    get(){
                        return name;
                    },
                    set(newVal){
                        name=newVal;
                    }
                },
                age:{
                    get(){
                        return age;
                    },
                    set(newVal){
                        age=newVal;
                    }
                }
            });
            //返回新的对象
            return _obj;
        }
        handleInput(e) {
            console.log("能进来吗", e.target.value);
            this.data.name = e.target.value;
            this.result.innerHTML = this.data.name;
        }
    }
    //需要new 构造函数，再执行这个方法
    new Test().init();
</script>

</html>

练习vue3 的通过proxy（ES6提供）实现数据响应E

ES6 阮一峰书中介绍，

1. Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”

2. Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。因此提供了一种机制，可以对外界的访问进行过滤和改写。

    let obj = {
        a : 1
    }
    let proxyObj = new Proxy(obj,{
        get : function (target,prop) {
            return prop in target ? target[prop] : 0
        },
        set : function (target,prop,value) {
            target[prop] = 888;
        }
    })
    
    console.log(proxyObj.a);        // 1
    console.log(proxyObj.b);        // 0

    proxyObj.a = 666;
    console.log(proxyObj.a)         // 888

不难看出，对obj这个对象做出了代理后，取属性时（ proxyObj.a ），存在就返回值，不存在则返回0（以前默认都是undefined），给属性a设置值时，通都为888

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐