Vue学习文档记录

1、单向数据流

注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

2、动态渲染HTML

v-html="rawHtml"

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

3、计算属性缓存 vs 方法

计算属性是基于它们的响应式依赖进行缓存的。只要 message 还没有发生改变，多次访问，计算属性会立即返回之前的计算结果，而不必再次执行函数。

Date.now() 不是响应式依赖 //不会更新

每当触发重新渲染时，调用方法将总会再次执行函数

4、计算属性 vs 侦听属性

当需要在数据变化时执行异步 (访问一个 API)或开销较大的操作时，通过 watch 选项提供一个更通用的方法，来响应数据的变化。

5、用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

6、v-if vs v-show

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

7、永远不要把 v-if 和 v-for 同时用在同一个元素上。

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

8、v-for 渲染的元素列表默认使用“就地更新”的策略

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

9、数组更新检测

变异方法 push() pop() shift() unshift() splice() sort() reverse()会触发视图更新。
替换数组 filter() concat() slice()返回一个新数组，不会触发视图更新。
不能检测以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  可以使用 vm.$set 实例方法vm.$set(vm.items, indexOfItem, newValue)
• 当你修改数组的长度时，例如：vm.items.length = newLength
  可以使用 splice：vm.items.splice(newLength)

10、Vue 不能检测对象属性的添加或删除

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

很多时候无意识就会犯这个错误

11、在组件上使用 v-for 时，key 是必须的。