VUE框架如何对数组中的元素进行响应式处理------VUE框架

旧约Alatus

已于 2023-12-04 00:28:05 修改

阅读量1.1k

点赞数 28

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

于 2023-12-03 11:01:45 首次发布

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

版权

前端同时被 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>
        <ul>
            <li v-for="arr,index in array" :key="index">{{arr}}</li>
        </ul>
        <ul>
            <li v-for="vip,index in vips" :key="vip.id">{{vip.id}}:{{vip.name}}</li>
        </ul>
    </div>
    <script>
        // 通过数组下标中的元素,默认情况下是没有添加响应式处理的
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                // 由此可知,VUE会给data中的所有属性,包括属性的属性做数据劫持
                // 方便我们实现数据更新时刷新dom树
                // 这种根下的东西,只能在定义的时候写或者添加东西,后期不能添加
                // 想添加,只能在声明好的属性下添加
                a : {
                    b : {
                        c : {
                            d : 1
                        }
                    }
                },
                // 数组本体是有响应式处理的
                // 通过我们修改下标的方式去修改
                // 内存中的已经变化了,但实际的dom树上没有变化
                array : [
                    "awe","b","c","d","e","f"
                ],
                // 数组中的每一个元素的属性是有响应式处理的
                vips : [
                    {id : "111", name : "Jack"},
                    {id : "112", name : "Rose"}
                ]
                // 通过数组下表修改数组中的元素,默认情况下,是没有添加响应式处理的
            }
        });
        // 不能给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>

<ul>

<li v-for="arr,index in array" :key="index">{{arr}}</li>

</ul>

<ul>

<li v-for="vip,index in vips" :key="vip.id">{{vip.id}}:{{vip.name}}</li>

</ul>

</div>

<script>

// 通过数组下标中的元素,默认情况下是没有添加响应式处理的

const vm = new Vue({

el : "#app",

data : {

msg : "Hello",

// 由此可知,VUE会给data中的所有属性,包括属性的属性做数据劫持

// 方便我们实现数据更新时刷新dom树

// 这种根下的东西,只能在定义的时候写或者添加东西,后期不能添加

// 想添加,只能在声明好的属性下添加

a : {

b : {

c : {

d : 1

}

}

},

// 数组本体是有响应式处理的

// 通过我们修改下标的方式去修改

// 内存中的已经变化了,但实际的dom树上没有变化

array : [

"awe","b","c","d","e","f"

],

// 数组中的每一个元素的属性是有响应式处理的

vips : [

{id : "111", name : "Jack"},

{id : "112", name : "Rose"}

]

// 通过数组下表修改数组中的元素,默认情况下,是没有添加响应式处理的

}

});

// 不能给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>