vue的$set和$get方法

在Vue中，$set和$get是Vue实例的两个内置方法，用于向响应式对象添加属性或获取属性的值。下面分别介绍它们的使用方法：

$set

$set 方法用于添加响应式对象的属性，并确保这个新属性也是响应式的。当向一个已经创建的对象添加属性时，如果使用JavaScript语法 obj.key = value 的方式进行赋值，则添加的属性不是响应式的，而是非响应式的。这时候，如果在模板或渲染函数中使用该属性，这个新的属性将无法触发组件重新渲染。

使用 $set 方法可以将一个属性添加到响应式对象中，使之成为响应式的。它接受三个参数，分别是响应式对象、属性名和属性值。

以下是一个简单的示例：

1.  
   <template>
2.  
   <div>
3.  
   {{obj.newProp}}
4.  
   <button @click="addProp">Add Property</button>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
    data() {
11.  
    return {
12.  
    obj: {
13.  
    prop1: 'value1',
14.  
    prop2: 'value2'
15.  
    }
16.  
    };
17.  
    },
18.  
    methods: {
19.  
    addProp() {
20.  
    this.$set(this.obj, 'newProp', 'new value');
21.  
    }
22.  
    }
23.  
    };
24.  
    </script>

在上面的示例中，我们定义了一个 obj 对象，包含两个属性 prop1 和 prop2，在组件的 addProp 方法中，使用 $set 方法向 obj 对象中添加了一个新的属性 newProp。

$get

$get 方法用于获取响应式对象的属性值，它可以直接访问对象的属性并返回属性值。 $get 方法接受两个参数，分别是响应式对象和属性名。

以下是一个简单的示例：

1.  
   <template>
2.  
   <div>
3.  
   {{ obj.prop1 }}
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   data() {
10.  
    return {
11.  
    obj: {
12.  
    prop1: 'value1',
13.  
    prop2: 'value2'
14.  
    }
15.  
    };
16.  
    },
17.  
    created() {
18.  
    const prop1Value = this.$get(this.obj, 'prop1');
19.  
    console.log(prop1Value); // 'value1'
20.  
    }
21.  
    };
22.  
    </script>

在上面的示例中，我们定义了一个 obj 对象，包含两个属性 prop1 和 prop2，在组件的 created 钩子函数中，使用 $get 方法获取 prop1 属性的值，并将其输出到控制台。

需要注意的是，使用 $set 和 $get 方法时，它们只能在响应式对象上使用，如果在普通对象上使用，它们将无效。

这篇好文章是转载于：学新通技术网