Vue中的set、delete方法在列表渲染中的使用

目录

数组中数据渲染后的修改、新增、删除问题

对象中数据渲染后的修改、新增、删除问题


不知大家是否有过类似的经历,比如说for循环渲染数组或者对象中的数据,渲染完成后,给数组或者对象添加、修改、删除数据后却没有在页面中渲染出来。

本篇就是来解释说明修改数组和对象数据视图立马更新的问题,要掌握各种情况和set、delete方法的使用

 

数组中数据渲染后的修改、新增、删除问题

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>list渲染中的问题
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="(item, index) of list" :key="item.id">
                {{item.text}} ---- {{index}}
            </div>
        </div>
        <script> 
            var vm = new Vue({
                el: "#app",
                data: {
                    list:[{
                        id:"001",
                        text:"hello"
                    }, {
                        id:"002",
                        text:"lll"
                    }, {
                        id:"003",
                        text:"ccc"
                    }]
                },
            })
        </script>
    </body>
</html>

运行结果

如果我们想看看添加数据是不是会继续渲染到界面中应该怎么做呢?

控制台输入list的push方法

这样是可以渲染到界面上的

结果我们继续添加list数据的数据,却发现没有渲染在界面上

从结构上看起来添加的不是响应式的数据, Vue 无法探测普通的新增属性

 我们不能通过数组下标的形式操作数组,直接修改新增删除都是无法触发视图更新的,数据变了页面是不会跟着变的,如果想直接操作数组必须通过数组的7个api方法去操作才可以,分别是push、pop、shift、unshift、splice、sort、reverse

修改可以splice,新增可以push、unshift、splice,根据需要使用、删除可以splice、unshift、pop,根据需要使用

或者直接改引用,让数组指向另一个内存空间,如下

 

或者用Vue的set方法去新增、修改数据,用Vue的delete方法去删除数据

也可以用Vue.delete(vm.list, 1);//删除下标为1位置的数据

 当然,set方法和delete方法不仅仅是Vue中的全局方法,也是实例方法,这个我们放在第二个例子讲解。

 

综上所述,数组要能直接触发视图更新在页面上渲染出来的方法

1.利用数组的api方法

2.改变数组指向的内存地址(改引用)

3.利用Vue的set、delete方法操作数组(推荐)

 

 

对象中数据渲染后的修改、新增、删除问题

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>对象数据渲染问题
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="item of userInfo">
                {{item}}
            </div>
        </div>
        <script> 
            var vm = new Vue({
                el: "#app",
                data: {
                    userInfo: 
                    {
                        name:"lcy",
                        age:25,
                        gender:"male",
                        salary:"secret"
                    }

                }
            })
        </script>
    </body>
</html>

运行结果

我们来尝试修改一下数据试试

看来这里仅仅可以修改对象里面已存在属性的数据触发更新,比数组强了点,数组修改数据也无法触发视图更新。

我们根据数组修改数据可以知道,要想触发视图更新,我们可以改变内存地址,比如这里的userInfo对象修改如下

这还却是可以,但是我们一般都不会去更改对象,我们可以用Vue.set方法来改变数据

删除可以用Vue.delete(vm.userInfo, 'age'),如图,age属性就没了

想用set方法直接设置为""或者undefined是无效的,只是赋值,但是对象属性还在

当然,set和delete不仅是Vue上面的全局方法,也是一个实例方法

比如Vue.set(vm.userInfo, "address", "shenzhen"); // 新增属性

等同于vm.$set(vm.userInfo, "address", "shenzhen");

比如Vue.delete(vm.userInfo, "age")

等同于vm.$delete(vm.userInfo, "age")

经过我的测试这都是可以的,根据需要使用

 

综上所述

虽然修改数组、对象中的数据都可以直接改变引用地址实现,但是不推荐。

直接修改数据的方法就是对象可以,数组不可以,但是这种操作不考虑,也不要用这种方法去打擦边球。

更加推荐的是利用Vue中的set、delete方法去实现修改、新增、删除数据。

 

关注、留言,我们一起学习。

 

===============Talk is cheap, show me the code================

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页