VUE框架响应式和数据劫持的具体逻辑------VUE框架-CFANZ编程社区

VUE框架响应式和数据劫持的具体逻辑------VUE框架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 所谓响应式就是我们VUE的核心机制,通过我们改变data中的数据 -->
        <!-- 自动为我们修改dom元素上的内容,我们借此可以减少对dom的操作 -->
        <!-- 达到专注业务部分的目的 -->
        <h1>{{a.b.c.d}}</h1>
        <h1>{{a.email}}</h1>
        <h1>{{a.email1}}</h1>
        <h1>{{a.email2}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                // 由此可知,VUE会给data中的所有属性,包括属性的属性做数据劫持
                // 方便我们实现数据更新时刷新dom树
                // 这种根下的东西,只能在定义的时候写或者添加东西,后期不能添加
                // 想添加,只能在声明好的属性下添加
                a : {
                    b : {
                        c : {
                            d : 1
                        }
                    }
                }
            }
        });
        // 不能给VM追加响应式的属性,也不能给data追加响应式的属性
        Vue.set(vm,'x','1');
        // 后期给VUE动态追加的一些属性会添加响应式处理吗? 
        // 答不会,后期添加的属性不是在data中定义的,vue给对象添加响应式处理
        // 是通过遍历循环data来实现的,因此,后期添加的属性不在data里面,无法添加响应式处理
        vm.$data.a.email2 = "1212asd2";
        // 使用Vue.set方法赋值
        // Vue.set方法可以直接将我们这个添加的属性添加到我们的data里面
        // 因此,如果我们想给后期追加的属性添加响应式处理的话
        // 让他们变成动态资源而不是静态的
        // 我们可以采用Vue.set()方法或者vm.$set()方法来实现
        // 这两种方式都是可以添加响应式的
        Vue.set(vm.a,'email',"1212affs12");
        vm.$set(vm.a,'email1',"121acz312");
    </script>
    
</body>
</html>
0 条评论