0


vue的$set和$get方法详解

在Vue中,

$set

$get

是Vue实例的两个内置方法,用于向响应式对象添加属性或获取属性的值。下面分别介绍它们的使用方法:

$set

$set

方法用于添加响应式对象的属性,并确保这个新属性也是响应式的。当向一个已经创建的对象添加属性时,如果使用JavaScript语法

obj.key = value

的方式进行赋值,则添加的属性不是响应式的,而是非响应式的。这时候,如果在模板或渲染函数中使用该属性,这个新的属性将无法触发组件重新渲染。

使用

$set

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

以下是一个简单的示例:

<template>
  <div>
    {{obj.newProp}}
    <button @click="addProp">Add Property</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        prop1: 'value1',
        prop2: 'value2'
      }
    };
  },
  methods: {
    addProp() {
      this.$set(this.obj, 'newProp', 'new value');
    }
  }
};
</script>

在上面的示例中,我们定义了一个

obj

对象,包含两个属性

prop1

prop2

,在组件的

addProp

方法中,使用

$set

方法向

obj

对象中添加了一个新的属性

newProp

$get

$get

方法用于获取响应式对象的属性值,它可以直接访问对象的属性并返回属性值。

$get

方法接受两个参数,分别是响应式对象和属性名。

以下是一个简单的示例:

<template>
  <div>
    {{ obj.prop1 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        prop1: 'value1',
        prop2: 'value2'
      }
    };
  },
  created() {
    const prop1Value = this.$get(this.obj, 'prop1');
    console.log(prop1Value); // 'value1'
  }
};
</script>

在上面的示例中,我们定义了一个

obj

对象,包含两个属性

prop1

prop2

,在组件的

created

钩子函数中,使用

$get

方法获取

prop1

属性的值,并将其输出到控制台。

需要注意的是,使用

$set

$get

方法时,它们只能在响应式对象上使用,如果在普通对象上使用,它们将无效。


本文转载自: https://blog.csdn.net/m0_72446057/article/details/129142717
版权归原作者 Rain小小黑 所有, 如有侵权,请联系我们删除。

“vue的$set和$get方法详解”的评论:

还没有评论