在 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 能够检测到更改。
- 使用数组方法时，确保数组本身是响应式的，否则元素的更改不会反映在视图中。
