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

偏执的太偏执、 2021-09-15 14:14 383阅读 0赞

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

**一.数组的更新监测**

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

> 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: '阅读'
                    });
                    // this.$set(element, 'isMyProject', true) 该方法亲测有效
                },
                del() {
                    // 删除键值对
                    // delete this.girl.name;
                    // 注意：以下参数分别为（对象，key值）
                    vm1.$delete(this.girl, 'name');
                }
            }
        });
    </script>

四.效果图

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

![70][]![70 1][]

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

![70 2][]![70 3][]![70 4][]

[70]: https://img-blog.csdn.net/20180620170202477?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20210802/01b70e490a1049e59d28cdd4441754e1.png
[70 2]: https://img-blog.csdn.net/20180620170430142?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180620170436678?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20210802/42b27dccd83745b89d3d7ae46a82adc3.png