vue的$set使用

Vue的$set方法是用来解决双向绑定失效的问题的。当我们在Vue实例创建之后，再次给数据赋值时，有时候并不会自动更新到视图上去。这是因为Vue在实例创建之后添加新的属性到实例上，它不会触发视图更新。这时候我们就需要使用$set方法来手动触发视图更新。$set方法可以设置属性对象，可以是Object或者数组，设置的key值可以是string或者number类型，设置的值可以是任意值。例如，在上述代码示例中，我们可以使用this.$set(this.obj.info,'content', 'who is my girlfriend?')来设置obj.info.content的值，从而手动触发视图更新。

相关问题

vue $set使用

Vue.js是一个MVVM框架，它通过数据绑定来实现视图和数据的同步。在Vue.js中，当我们需要动态添加一个属性到一个已经创建的对象上时，Vue.js并不会检测到这个变化，因为Vue.js在初始化实例时对属性进行了预处理，所以新添加的属性不会被观察到。这时候我们就需要使用Vue.js提供的$set方法来解决这个问题。

$set方法是Vue.js实例的一个方法，它可以用来向一个已经创建的对象添加一个新的属性，并且能够触发视图的更新。$set方法的语法如下：

this.$set(object, propertyName, value)

其中，object是要添加属性的对象，propertyName是要添加的属性名，value是要添加的属性值。

举个例子，假设我们有一个data对象，它包含一个数组list和一个对象userProfile：

data: {
  list: [1, 2, 3],
  userProfile: {
    name: 'Tom',
    gender: 'male'
  }
}

如果我们想要向userProfile对象中添加一个age属性，我们可以使用$set方法：

this.$set(this.userProfile, 'age', 27)

这样就可以向userProfile对象中添加一个age属性，并且能够触发视图的更新。

vue $set原理

$是Vue框架中的一个方法，它的作用是在改变对象或数组的属性值时触发视图的更新。具体原理如下：

1. 首先，Vue在原型上添加了$set方法，该方法接收三个参数：目标对象、属性名和属性值。

2. 当需要改变对象的已有属性时，$set方法会直接修改目标对象中对应属性的值。

3. 当目标对象是数组时，$set方法会利用Vue内部拦截处理后的数组的splice方法进行赋值。Vue对数组的'push'、'pop'、'shift'、'unshift'、'splice'、'sort'、'reverse'方法进行拦截处理，使其成为响应式的。通过调用这些方法，可以触发视图的更新。但是直接通过下标赋值的方式如arr=2是不会触发视图更新的。

4. 当需要新增属性时，$set方法会通过defineReactive将数据转化为getter和setter的方式，并触发数据变化通知。这样新增的属性也能被观察并触发视图的更新。

综上所述，$set方法通过不同的处理方式来实现对目标对象的属性更新并触发视图的更新。