记录一些vue的知识点

• Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
  —>生命周期钩子的 this 上下文指向调用它的 Vue 实例。
  —>不要在选项属性或回调上使用箭头函数,因为箭头函数并没有 this。
  —>生命周期函数：

• Mustache”语法 (双大括号) 的文本插值: 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。

• 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

• 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

• 在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、" "、null、undefined 和 NaN 以外皆为真值）。

• 用key管理可复用的元素：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，而且为相同的元素添加一个唯一值的key值，可以使这两个元素是完全独立的，不会复用它们。

• v-show 不支持 元素，也不支持 v-else。

• v-if 与 v-show：
  –>v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  –>v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS的display属性 进行切换。
  –>v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• v-for遍历数组： v-for=“(item,index) in items” items 是源数据数组
  两个参数： item 是被迭代的数组元素的别名，index是可选参数，即当前项的索引。

• v-for遍历对象：v-for="(value, name, index) in object" 三个参数：value- 当前对象的键值，name-键名，index-索引。

• 维护状态：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
  –>这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
  –>在使用 v-for 时提供 key:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

• 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
  可以使用以下两种方法操作对象：

 this.$set(this.data,”key”,value')
 Vue.set(object, propertyName, value)