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

最新推荐文章于 2022-12-05 23:13:32 发布

荔枝1

最新推荐文章于 2022-12-05 23:13:32 发布

阅读量472

点赞数

分类专栏： Vue

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

版权

Vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

给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

荔枝1

关注

0
点赞
踩
1

收藏

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

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

扫一扫