Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

vue.js官网：https://cn.vuejs.org/v2/guide/components-registration.html

一、计算属性-computed

　　1. 作用：能够避免数据冗余，通过计算，可以在已有的data数据中生成新的变量，计算属性的变量将会被缓存

　　    触发时机：当依赖的响应式属性变化才会重新计算

示例：

html:
<!-- 输出：Li XuanJing -->
<div id="app">{{fullName}}</div>

script:
var vm = new Vue({
   el:'#app',
   data:{
     fristName:'Li'
     lastName:'XuanJing'
  },
   computed:{
     // 仅读取
     fullName () {
      return this.fristName + ' ' + lastNmae
     },
     setName ：{
　　　　//读取和设置(getter、setter)
　　　　get () {
       　　return this.fristNmae + ' ' lastName
　　　　}
　　　　set (v) {
　　　　　　this.lastName = v + lastName
　　　　}　　
     }
  }
})
// 修改 setName 属性
vm.setName = 'lx'  // => 输出： lastName = lxXuanJing

二、属性监听-watch

　　 1. 作用：监听属性的变化

2. 触发时机：当属性发生变化时触发（可以配合v-model等指令使用）

示例(vue.js官方实例)：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
　　methods:{
　　　　someMethod () { /* ...... */}
　　}
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 绑定一个方法
    b: 'someMethod',
    // deep=true 深度 watcher（检测每一个伪属性的变化）
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 设置immediate属性后，该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}：监听e.f属性的变化
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

　　

三、方法选项-methods

　　作用：Vue实例中，函数需要定义在 methods 对象选项中

　　触发时机：当methods中的方法被主动调用的时候触发

实例（官方实例）：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2