VUE整理（五）

### VUE整理（五）——列表渲染与动态数据更新 #### 一、列表渲染 列表渲染是Vue.js中一个非常重要的特性，它允许开发者通过循环遍历数组或对象来动态生成DOM元素。这种方式极大地简化了代码，并使得界面更加灵活。 ##### 1. 迭代一个数组 在Vue中，我们可以使用`v-for`指令来遍历数组中的每一项，并为每一项创建一个DOM元素。`v-for`指令需要使用`item in items`的形式，其中`items`是我们要遍历的数组，而`item`则代表数组中的每一项。 **示例代码：** ```html <!-- 迭代一个数组 --> <!-- test1：v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。 --> <!-- 我要把 items 中的东西取出来，item 就是每次取出来的对象 --> <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 <!-- test1.1 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。 --> <!-- 扩展：你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法： --> <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 <!-- 迭代一个对象 --> <!-- test2： --> <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的强大功能来构建动态且响应迅速的应用程序。