Vue.js 2.0 Official Guide Note

这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于 Vue 1.0 ，可以参考我的另一篇文章 Vue.js 1.0 Official Guide Notes。

Vue 实例

属性与方法

• 不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod()) ）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

实例生命周期

• 生命周期钩子

  var vm = new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
    }
  })
  // -> "a is: 1"
  

• 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

• Vue 没有 Controller ，组件的自定义逻辑可以分布在这些钩子中。

生命周期图示

Vue Lifecycle

模板语法

• 在 Vue 2 中，提供了支持 JSX 语法的 render 函数。

插值

文本

• 使用 v-once 指令执行一次性插值

  This will never change: {{ msg }}
  

纯 HTML

• 使用 v-html 指令输出纯 HTML

  • 被插入的内容都会被当做 HTML ，数据绑定会被忽略。
  • 不能使用 v-html 来复合局部模板。
  • 只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。（避免 XSS ）

属性

• Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令（包括布尔值）。

使用 JavaScript 表达式

• Vue.js 对于所有的数据绑定都提供了完全的 JavaScript 表达式支持。
• 每个绑定只能包含单个表达式，不能是语句（比如：赋值语句）也不能是流程控制（使用三元表达式替代）。
• 模板表达式被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。不能模板表达式中访问用户定义的全局变量。

指令

• 指令（Directives）是带有 v- 前缀的特殊属性。其属性的值预期是单一 JavaScript 表达式（除了 v-for ）。
• 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

参数

• 一些指令能接受一个“参数”，在指令后以冒号指明。

  • v-bind 指令被用来响应地更新 HTML 属性：

  • v-on 指令，它用于监听 DOM 事件：

修饰符

• 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

  • .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() ：

过滤器

• 过滤器被用作一些常见的文本格式化。

• 过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

• 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

  
  {{ message | capitalize }}
  
  
  

• 在 Vue 2 中，过滤器只能在 mustache 绑定和 v-bind 表达式中使用，对于更复杂的数据变换应当使用计算属性。

• 过滤器函数总接受表达式的值作为第一个参数。

  new Vue({
    // ...
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })
  

• 过滤器可以串联。

  {{ message | filterA | filterB }}
  

• 过滤器是 JavaScript 函数，因此可以接受参数。

  {{ message | filterA('arg1', arg2) }}
  // 字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
  

计算属性

计算属性

• 在模板中放入太多的逻辑会让模板过重且难以维护。

计算属性 vs Methods

• 对于最终结果，计算属性与 Method 是相同的。

• 计算属性是基于它们的依赖进行缓存的，其只有在它的相关依赖发生改变时才会重新求值。

  • 当然这也意味着有些计算属性求值后将不会更新，比如 Date.now() ，因为它不是响应式依赖。

    computed: {
      now: function () {
        return Date.now()
      }
    }
    

• 相比而言，只要发生重新渲染，method 调用总会执行该函数。

Computed 属性 vs Watched 属性

• Computed 属性能更好的处理多个数据的变动，而不需要为每一个数据单独书写 watch 函数。

计算 setter

• 计算属性默认只有 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]
      }
    }
  }
  // ...
  

• 现在在运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。

观察 Watchers

• 当想要在数据变化响应时，执行异步操作或开销较大的操作，watch 会很实用。

• 举个栗子：

  
    
  
      Ask a yes/no question:
      
    
    
  {{ answer }}
  
  

• 在这个示例中，使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

• 除了 watch 选项之外，还有 vm.$watch 命令。

Class 与 Style 绑定

绑定 HTML Class

对象语法

• v-bind:class 指令可以与普通的 class 属性共存。

• 可以直接绑定数据里的一个对象。

  data: {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
  

• 也可以在这里绑定返回对象的计算属性。

  data: {
    isActive: true,
    error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
  

数组语法

• 可以把一个数组传给 v-bind:class ，以应用一个 class 列表。

• 如果需要根据条件切换列表中的 class ，可以用三元表达式。

  
  // 始终添加 errorClass ，但只有在 isActive 是 true 时添加 activeClass
  

• 可以在数组语法中使用对象语法。

用在组件上

• 在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。

绑定内联样式

• 和 Class 类似。

条件渲染

v-if

• 使用 v-if 选择性的渲染（不是显示）元素。

v-else-if

  A


  B


  C


  Not A/B/C

• 类似于 v-else ，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

用 key 管理可复用的元素

• Vue 通常会复用已有元素而不是从头开始渲染，以提升运行效率。

• 例如：如果允许用户在不同的登录方式之间切换

  • 上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素， 不会被替换掉——仅仅是替换了它的的 placeholder 。

• 有些情况下这样做不符合需求。Vue 提供了一种方式来声明两个元素的独立性：添加一个具有唯一值的 key 属性。

  • 注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

• 使用 v-show 根据条件展示元素。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
• v-show 不支持