说说vue的列表渲染


文章目录

  • 说说vue的列表渲染
  • v-for里渲染对象
  • 维护状态
  • 数组更新检测
  • 对于对象
  • 对于数组
  • 声明响应式 property
  • 渲染内容为方法返回值


-for里渲染对象

如果列表渲染为对象，那么可以使用v-for的参数分别获取对象的键值与序号
举例：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

三个参数，从左往右分别是键值，键名，序号

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

所以要尽可能在使用v-for时提供key,除非遍历输出的DOM内容非常简单，或者是刻意依赖行为以获取性能上的提升。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

  • 完整地触发组件的生命周期钩子
  • 触发过渡

官网例子：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当上面text发生改变时，<span>总是会被替换而不是被修改，因此会触发过渡

数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

但是
如果不使用这些方法并不能检测数组和对象的变化。

对于对象

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
但是
可以使用：
this.$set(Object, key, value) 这样就会触发响应式更新。

有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组

Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength

对于这两种问题都可以用
items.splice()或
this.$set(Array, index, newValue)

解决来实现响应式。

声明响应式 property

由于 Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值

渲染内容为方法返回值

v-for可以渲染方法返回值，例如：

<h1 v-for="item in a" :key="item">
      {{item}}
    </h1>
methods: {
    a(){
      return ["a","b"]
    }
  },