Vue入门-数组与对象的检测

关于监测数组与对象的变动

一.数组的更新监测

下面的方法,修改数组,可以引起视图更新渲染(因为数组与页面绑定的关系，即会导致页面改变)。

push（尾部插入）, pop（尾部删除）, unshift（头部插入）, shift（头部删除）, splice, sort（排序）, reverse（倒叙输出）

注意事项:

1.当使用filter, map, contact, slice, 返回值都是新数组,不会引起页面更新, 除非在给原来的数组赋一次值
2.this.arr[index]=newValue,不会引起页面渲染,*(注意:this.arr[index].属性名=新的属性值,会引起页面渲染)
Vue.set(实例中的数组或对象,下标/key,更新的值) 推荐使用该方式,优点：不用区分实例对象

Vm1.$set(实例中的数组或对象,下标/key,更新的值)

二.对象的更新监测

通过键,更新value的值,可以引起页面刷新, 但是需要注意的是: 对已有对象再次更新或删除键值对,不会引起页面渲染。
新增键值对方法:

新增一个键值对: Vue.set(实例中的对象,key,更新的值)

新增多个键值对: Object.assign({},this.girl,{多个键值对})

三.代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组与对象监测(常用)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        ul {
            display: inline-block;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <hr>
        <ul v-for="stu in aStudents">
            <li>
                {{stu.name}}
            </li>
            <li>
                {{stu.age}}
            </li>
            <li>
                {{stu.gender}}
            </li>
        </ul>

        <p>{{fruits[1]}}</p>
        <button @click="doChange">{{btnText}}</button>

        <hr>
        <ul>
            <li v-for="(v, k) in girl">
                属性:{{k}}-属性值:{{v}}
            </li>
        </ul>
        <br>
        <button @click="add">新增键值对</button>
        <button @click="del">删除键值对</button>
        <hr>
    </div>
</body>

</html>
<script>
    let vm1 = new Vue({
        el: '#app',
        data: {
            aStudents: [{
                    name: '张娟',
                    age: 18,
                    gender: 'female'
                },
                {
                    name: '李强',
                    age: 20,
                    gender: 'male'
                },
                {
                    name: '王霞',
                    age: 30,
                    gender: 'female'
                }
            ],
            fruits: [
                '苹果',
                '香蕉',
                '梨子',
                '橘子',
                '西瓜',
                '芒果'
            ],
            girl: {
                name: '赤练',
                age: 18,
                height: 185
            },
            btnText: '点击改变值'
        },
        methods: {
            doChange() {
                // A.this.arr[index].属性名=新的属性值,会引起页面渲染
                //this.aStudents[0].name = '惊鲵';

                // B.this.arr[index]=newValue,不会引起页面渲染
                //this.aStudents[0] = {name: '李斯'};
                //this.fruits[0] = '桃子';

                // 第一种
                Vue.set(this.fruits, 0, '桃子');
                console.log(this);
                // this指当前创建出来的实例本身

                // 注意：以下参数分别为（实例中的数组或对象,下标/key,更新的值），两种写法等价，如下：
                vm1.$set(this.fruits, 1, '桃子');
                Vue.set(this.aStudents, 0, {
                    name: '谢燕',
                    age: 25,
                    gender: 'female'
                })
                this.btnText = '已改变值'
            },
            add() {
                // 新增多个键值对,方法一:
                Vue.set(this.girl, 'gender', 'female');
                Vue.set(this.girl, 'hobby', '阅读');
                // 新增多个键值对,方法二:
                this.girl = Object.assign({}, this.girl, {
                    gender: 'female',
                    hobby: '阅读'
                });
            },
            del() {
                // 删除键值对
                // delete this.girl.name;
                // 注意：以下参数分别为（对象，key值）
                vm1.$delete(this.girl, 'name');
            }
        }
    });
</script>

四.效果图

点击“点击改变值”前后对比

点击“增加键值对”“删除键值对”前后对比图

Vue入门-数组与对象的检测

猜你喜欢