网站首页 Vue 正文

Vue 响应式有什么特点？如何掌握 Vue 响应式的特点？

作者：狮子座的男孩更新时间： 2022-01-22 Vue

Ⅰ、 Vue 响应式：

1、什么是 Vue 响应式：
答：简单说：当更新或者增加data(数据)时，页面(UI)会有响应，重新渲染对应的数据；
2、Vue 响应式的特点：
其一、对象新增加的属性，不具有响应式；
其二、修改对象本存在属性，具有响应式；
其三、数组的普通(非对象)元素通过索引修改，不具有响应式；
其四、数组的对象元素通过索引修改，具有响应式；
其五、数组通过调用 ‘push/splice/shift…’ 方法具有响应式；
其六、数组通过调用 ‘push/splice/shift…’ 方法新增加的对象元素也具有响应式；

Ⅱ、原 Vue 响应式特点的展示过程：

1、代码展示：
其一、展示 Vue 响应式的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"> 
        {{a}}   {{d[0]}}    {{d[d.length-1]}}    {{b[0].num}}    {{b[0].num2}}    {{c}}    {{c.x}}    {{b}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {  //返回的数据对象是具有响应式的；
                    a: 10,
                    b: [{
                        num: 10
                    }, 2, 3],
                    c: {
                        x: 123
                    },
                    d: [1,2,3]
                }
            } 
        });        

    </script>
</body>

</html>

其二、页面的展示结果为： (一一对应)
{{a}} {{d[0]}} {{d[d.length-1]}} {{b[0].num}} {{b[0].num2}} {{c}} {{c.x}} {{b}}

// 注意：由于 b 数组的 b[0] 对象中并没有 num2 这个属性值，因此 {{b[0].num2}} 并没有值输出；
在这里插入图片描述

2、 Vue 响应式的操作：
其一、对象新增加的属性，不具有响应式；
A、在控制台输入的代码为：vm.c.y = 321;
在这里插入图片描述
B、页面展示结果为：
// 此时 {{c}} 的输出结果仍为：{"x":123}，并没有将 c.y 的值显示出来，就说明：对象新增加的属性，不具有响应式；

其二、修改对象本存在属性，具有响应式；
A、在控制台输入的代码为：vm.c.x = 999;
在这里插入图片描述

B、页面展示结果为：
// 此时 {{c}} 的输出结果为：{"x":999}，且 {{c.x}} 的输出结果为：999，就说明：修改对象本存在属性，具有响应式；
在这里插入图片描述

其三、数组的普通(非对象)元素通过索引修改，不具有响应式；
A、在控制台输入的代码为：vm.b[1] = 5;
在这里插入图片描述
B、页面展示结果为：
// 此时 {{b}} 的输出结果为：[{"num":10}, 2, 3]，就说明：数组的普通(非对象)元素通过索引修改，不具有响应式；

其四、数组的对象元素通过索引修改，具有响应式；
A、在控制台输入的代码为：vm.b[0].num]= 999;
在这里插入图片描述

B、页面展示结果为：
// 此时 {{b}} 的输出结果为：[{"num":999}, 2, 3]，就说明：数组的对象元素通过索引修改，具有响应式；
在这里插入图片描述

其五、数组通过调用 ‘push/splice/shift…’ 方法具有响应式；
A、在控制台输入的代码为：vm.b.push(4);
在这里插入图片描述

B、页面展示结果为：
// 此时 {{b}} 的输出结果为：[{"num":999}, 2, 3, 4]，就说明：数组通过调用 ‘push/splice/shift…’ 方法具有响应式；
在这里插入图片描述
其六、数组通过调用 ‘push/splice/shift…’ 方法新增加的对象元素也具有响应式；
A、在控制台输入的代码为：vm.b.push({m:10}); 和 vm.b[3].m = 999;

B、页面展示结果为：
// 此时 {{b}} 的输出结果为：[{"num":10}, 2, 3, {"m": 999}]，就说明：数组通过调用 ‘push/splice/shift…’ 方法新增加的对象元素也具有响应式；
在这里插入图片描述

Ⅲ、小结：

其一、Vue 响应式的特点：

A、对象新增加的属性，不具有响应式；
B、修改对象本存在属性，具有响应式；
C、数组的普通(非对象)元素通过索引修改，不具有响应式；
D、数组的对象元素通过索引修改，具有响应式；
E、数组通过调用 ‘push/splice/shift…’ 方法具有响应式；
F、数组通过调用 ‘push/splice/shift…’ 方法新增加的对象元素也具有响应式；

其二、哪里有不对或不合适的地方，还请大佬们多多指点和交流！

原文链接：https://blog.csdn.net/weixin_43405300/article/details/122382389

上一篇：vue2，vue3移动端实现表格固定和首列固定
下一篇：vue3 +vite 动态菜单和路由懒加载

网站首页 Vue 正文

Vue 响应式有什么特点？ 如何掌握 Vue 响应式的特点？

Ⅰ、 Vue 响应式：

Ⅱ、原 Vue 响应式特点的展示过程：

Ⅲ、小结：

相关推荐

Vue 响应式有什么特点？如何掌握 Vue 响应式的特点？