在 vue.js 中，修改值的方式取决于值的类型和使用场景。可通过 vue.set() 或直接赋值来修改响应式数据，而对于非响应式数据则需使用 $set 或 object.assign()。修改数组元素可以使用 splice()、push() 和 pop() 方法，但需确保数组本身是响应式的。

Vue.js 中修改值的指南

在 Vue.js 中，修改值有多种方法，具体取决于值的类型和使用场景。

修改响应式数据

Vue.js 的响应式数据允许在值更改时自动更新视图。使用以下方法修改响应式数据：

立即学习“前端免费学习笔记（深入）”；

• Vue.set()：用于向响应式对象添加或更新属性。

  const obj = Vue.observable({ foo: 'bar' });
  Vue.set(obj, 'foo', 'new value');

• 直接赋值：对于已声明为响应式的对象，可以使用直接赋值来修改其属性。

  const obj = Vue.observable({ foo: 'bar' });
  obj.foo = 'new value';

修改非响应式数据

如果数据不是响应式的，则可以使用以下方法对其进行修改：

• $set：Vue 实例的方法，用于向非响应式对象添加或更新属性。

  this.$set(obj, 'foo', 'new value');

• Object.assign()：创建一个新对象，其中包含目标对象的属性，并将其分配给目标对象。

  Object.assign(obj, { foo: 'new value' });

修改数组元素

要修改数组元素，可以使用以下方法：

• splice()：在数组中添加、删除或替换元素。

  const arr = ['foo', 'bar'];
  arr.splice(1, 1, 'baz'); // 替换第二个元素为 'baz'

• push()：在数组末尾添加元素。

  arr.push('new item');

• pop()：从数组末尾删除元素。

  arr.pop();

注意：

• 修改对象属性时，确保对象已声明为响应式，否则视图不会更新。
• 修改非响应式数据时，使用 $set 或 Object.assign()，以确保 Vue.js 能够检测到更改。
• 使用数组方法时，确保数组本身是响应式的，否则元素的更改不会反映在视图中。