vue中响应式数据存在的一些注意事项以及$set的使用

最新推荐文章于 2024-07-04 09:46:22 发布

灯光下的投影

最新推荐文章于 2024-07-04 09:46:22 发布

阅读量1k

点赞数

分类专栏： vue 文章标签：响应式数据 $set

本文链接：https://blog.csdn.net/liuyuhua666/article/details/92833861

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新

如果想要有响应式效果:

1. 就需要提前，在对象中先把属性声明好在hcc中一开始就添加好age属性，哪怕不给值

2. 如果确实需要动态的给对象添加age属性，那么我们可以用到vue中提供的$set方法，这个方法，可以动态的给数据添加响应式的属性！

例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>
      我叫{{aa.name}}
      <br>
      我有辆{{aa.car}}
      <br>
      我今年才{{aa.age}}
      </p>

      <button @click="btnAddAge">添加年龄</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          aa: {
            name: "张三",
            car: "玛莎拉蒂"
          }
        },
        methods: {
          btnAddAge(){
            // 给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新
            // 如果想要有响应式效果
            // 1. 就需要提前，在对象中先把属性声明好 在aa中一开始就添加好age属性，哪怕不给值
            // this.aa.age = 18;
            // 2. 如果确实需要动态的给aa对象添加age属性，那么我们可以用到vue中提供的$set方法 
            // 这个方法，可以动态的给数据添加响应式的属性！
            
            this.$set(this.aa, "age", 18);
            //或者 Vue.set(this.aa, "age", 18)
          }
        }
      });
    </script>
  </body>
</html>

$set在数组中的使用：

数组通过索引直接修改索引对应的内容，是无法实现响应式的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in students" :key="item.id">{{item.name}}</li>
      </ul>

      <button @click="btnChangeName">改名字</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          students: [
            { id: 1, name: "aa" },
            { id: 2, name: "bb" },
            { id: 3, name: "cc" }
          ]
        },
        methods: {
          btnChangeName() {
            // 数组通过索引直接修改索引对应的内容，是无法实现响应式的效果
            // this.students[1] = {id: 2, name: "dd"}; 没有效果
            this.$set(this.students, "1", {id: 2, name: "贵安"})

            // this.$set(要设置属性的对象, "要修改/添加的属性名", 值)
          }
        }
      });
    </script>
  </body>
</html>

什么时候用$set?
1. 当给对象动态添加属性的时候，需要用$set
2. 当想要通过数组的下表给元素赋值的时候，需要用$set

灯光下的投影

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中响应式数据存在的一些注意事项以及$set的使用

给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新如果想要有响应式效果:1. 就需要提前，在对象中先把属性声明好在hcc中一开始就添加好age属性，哪怕不给值2. 如果确实需要动态的给对象添加age属性，那么我们可以用到vue中提供的$set方法，这个方法，可以动态的给数据添加响应式的属性！例：<!DOCTYPE html>&lt...
复制链接

扫一扫

专栏目录