VUE框架响应式和数据劫持的具体逻辑------VUE框架

旧约Alatus

已于 2023-12-04 00:27:39 修改

阅读量958

点赞数 26

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript ecmascript 前端框架 vue js

于 2023-12-02 15:48:09 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134753310

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!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>
        
        
        
        <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>
<!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>







<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>