《vue3中的set方法》

在Vue3中，我们可能会遇到需要更新响应式数据对象的深层次属性值的情况。使用Vue.set（在Vue3中为set）是一个有效的解决方案，它能确保数据变化被正确追踪并触发视图更新。

直接修改深层属性可能带来的问题

如果直接通过类似this.obj.deepProp = newValue的方式修改对象的深层次属性，在某些情况下，Vue无法检测到这种变更，导致视图不会更新。例如：

javascript
const app = Vue.createApp({
data() {
return {
user: {
info: {
name: 'Tom'
}
}
};
},
methods: {
changeName() {
// 这种方式可能不被Vue检测到
this.user.info.name = 'Jerry';
}
}
});


使用set方法解决

思路一：使用全局提供的set函数

可以使用Vue.set（在Vue3中直接使用set），它的参数分别为目标对象、键名和新的值。

javascript
import { set } from 'vue';</p>

<p>const app = Vue.createApp({
  data() {
    return {
      user: {
        info: {
          name: 'Tom'
        }
      }
    };
  },
  methods: {
    changeName() {
      set(this.user.info, 'name', 'Jerry');
    }
  }
});

思路二：利用reactive定义响应式数据并借助set操作

用reactive定义一个响应式对象，当要修改深层次属性时再用set。

javascript
import { reactive, set } from 'vue';</p>

<p>const app = Vue.createApp({
  setup() {
    const user = reactive({
      info: {
        name: 'Tom'
      }
    });</p>

<pre><code>function changeName() {
  set(user.info, 'name', 'Jerry');
}

return {
  user,
  changeName
};

}
});

这两种思路都可以很好地解决在Vue3项目中对深层次响应式对象属性进行修改并且保证视图正常更新的问题。在实际开发中，我们可以根据项目的具体情况来选择合适的方式。