首页vue 数组对象键值发生变化未重新渲染

vue 数组对象键值发生变化未重新渲染

时间: 2023-09-04 10:02:08 浏览: 121

VUE整理（五）

### VUE整理（五）——列表渲染与动态数据更新 #### 一、列表渲染列表渲染是Vue.js中一个非常重要的特性，它允许开发者通过循环遍历数组或对象来动态生成DOM元素。这种方式极大地简化了代码，并使得界面更加灵活。 ##### 1. 迭代一个数组在Vue中，我们可以使用`v-for`指令来遍历数组中的每一项，并为每一项创建一个DOM元素。`v-for`指令需要使用`item in items`的形式，其中`items`是我们要遍历的数组，而`item`则代表数组中的每一项。 **示例代码：** ```html    <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script> ``` 在这个例子中，`items`数组包含两个对象，每个对象都有一个`message`属性。通过`v-for`指令，我们可以在页面上为数组中的每一项创建一个`<li>`元素，并显示该元素的`message`值。 **扩展：**在`v-for`块中，我们还拥有对父作用域属性的完全访问权限。此外，`v-for`还支持一个可选的第二个参数，即当前项的索引。这可以通过`(item, index) in items`的形式来实现： ```html   <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <script> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script> ``` 这个例子展示了如何访问父作用域中的`parentMessage`属性，并且同时获取数组中每一项的索引。 ##### 2. 迭代一个对象除了数组之外，`v-for`还可以用来遍历对象。在这种情况下，我们可以使用`value in object`的形式来遍历对象的每一个值。 **示例代码：** ```html   <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> <script> new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> ``` 在这个例子中，我们遍历了一个包含姓名和年龄的对象。与遍历数组类似，我们也可以获取对象中每一项的键名和索引： ```html <div id="app-3"> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> </div> <script> new Vue({ el: '#app-3', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> ``` #### 二、数据源更新检测为了使视图能够根据数据的变化自动更新，Vue提供了对数据的动态观察机制。这对于实现动态的页面变化非常重要。 ##### 1. 数组更新检测 Vue通过一组变异方法来检测数组的变化，并确保当这些方法被调用时会触发视图更新。这些方法包括： - `push()` - `pop()` - `shift()` - `unshift()` - `splice()` - `sort()` - `reverse()` 这些方法可以直接用于数组，Vue会自动检测到这些操作并更新视图。 **示例代码：** ```javascript example1.items.push({ message: 'Baz' }); ``` 这个简单的`push()`操作会立即使视图更新，添加一个新的列表项。 **非变异方法：**相比变异方法，还有一些非变异方法，如`filter()`, `concat()` 和 `slice()`等。这些方法不会改变原始数组，而是返回一个新数组。当使用这些非变异方法时，我们需要用新数组替换旧数组： ```javascript example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/); }); ``` 这种方法同样可以更新视图。 ##### 2. Vue无法检测的数组变动尽管Vue提供了强大的数组变动检测机制，但仍然有一些情况是Vue无法自动检测到的： - **直接设置数组索引:** 当你利用索引直接设置一个项时，例如`vm.items[indexOfItem] = newValue`。 - **修改数组长度:** 当你修改数组的长度时，例如`vm.items.length = newLength`。对于这两种情况，Vue提供了一些解决方案： - **使用Vue.set()方法:** 可以通过`Vue.set(vm.items, indexOfItem, newValue)`的方式来更新数组中的某一项。 - **使用Array.prototype方法:** 如果你想保持使用JavaScript原生的方法，也可以考虑使用`Array.prototype.splice(indexOfItem, 1, newValue)`。通过合理地使用`v-for`指令以及正确处理数组更新，我们可以有效地利用Vue.js的强大功能来构建动态且响应迅速的应用程序。

当Vue监听的数组对象的键值发生变化时，Vue默认并不会自动重新渲染视图。这是因为Vue使用了数据劫持的方式来实现响应式更新，当数组对象的键值发生变化时，Vue无法检测到这种变化。所以在这种情况下，需要手动触发Vue的重新渲染机制。一种解决办法是使用Vue提供的$set方法来更新数组对象的键值。$set方法可以在不触发Vue代理的情况下更新键值，从而使Vue能够检测到变化并重新渲染视图。例如，如果有一个数组对象arr，我们可以使用以下方式来更新键值： Vue.$set(arr, index, newValue); 其中，arr为需要更新的数组对象，index为需要更新的键值所在的索引位置，newValue为新的键值。另一种解决办法是通过修改数组对象的引用来触发Vue的重新渲染。可以直接对数组进行赋值操作，或者使用数组的一些方法(如push、pop、splice等)来修改数组元素。这样Vue会检测到数组对象的引用发生了变化，从而重新渲染视图。综上所述，当Vue监听的数组对象的键值发生变化时，需要使用$set方法或修改数组对象的引用来手动触发Vue的重新渲染机制，从而更新视图。

阅读全文