Vue 2.x

:TODO: 继续完善编辑

规范

定义非监听响应式数据

<script>
export default {
  data() {  
    //方式一：在此定义的数据未进行监听，不具备响应式，从而减少性能损耗
    //可以定义私有变量、临时变量等
    return {
      //此处定义的数据具备响应式
      data:Object.freeze({name:''}) //方式二：Object.freeeze锁定数据也不会监听
    }
  }
}
</script>

v-if和v-show的使用
v-for比v-if优先级高永远不要把 v-if 和 v-for 同时用在同一个元素上。

<!-- bad -->
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
      {{ user.name }}
  </li>
</ul>

<!-- good -->
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id">
      {{ user.name }}
  </li>
</ul>

数组数据监听更新
v-for绑定：key

在组件上必须用 key 搭配 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)open in new window。

<ul>
  <li
    v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
  </li>
</ul>

computed计算属性具有缓存特性
Functional函数组件
函数组件只用于纯展示，涉及到computer、watcher等都会报错。

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

拆分子组件
因为子组件的渲染和父组件是分开的。
子组件更新不会导致父组件也更新。
若经常更新某块区域，则可以单独拆分出个子组件。

Tips

多用Object.create(null)
Object.create(null)创建的对象不具有原型链，会减少内存。
主要应用传参、变量存储等

参考或引用