Vue的 computed 与 watch

Vue 文档在这里

1.computed 计算属性

在模板内进行简单运算十分方便，而这也是设计它们的初衷，但是在模板里会让模板过重且难以维护，例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

• 用途
  因此，对于复杂得逻辑，应当使用 计算属性。
  计算数形函数将被作为同名属性的getter 和 setter。
  当你有一些数据需要随着其它数据变动而变动时，最好是使用计算属性。
  计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。
  小例子：实现列表的筛选功能

new Vue({
  data() {
    return {
      users: [
        createUser("akane", "女"),
        createUser("小华", "男"),
        createUser("圆圆", "女"),
        createUser("方圆", "男")
      ],
      gender: ""
    };
  },
  computed: {
    displayUsers() {
      const hash = {
        male: "男",
        female: "女"
      };
      const { users, gender } = this;
      if (gender === "") {    // 空字符串代表全部显示
        return users;
      } else if (typeof gender === "string") {    // 根据哈希表中的数据显示
        return users.filter((u) => u.gender === hash[gender]);
      } else {
        throw new Error("gender的值出现异常");    // 此外就是抛出异常
      }
    }
  },
  methods: {
    setGender(string) {
      this.gender = string;
    }
  },
  template: `
    <div>
      <div>
      <button @click="setGender('')">全部</button>
      <button @click="setGender('male')">男</button>
      <button @click="setGender('female')">女</button></div>
      <ul>
       <li v-for="(u,index) in displayUsers":key="index">{{u.name}} - {{u.gender}}</li>
      </ul>
    </div>
  `
}).$mount("#app");

• 缓存
  其实 computed 中的计算可以放在 methods 里实现，结果相同，然后不同的是计算实行是基于响应式以来进行缓存的。计算属性函数在数据没有发生变化的时候不会执行函数，保存上一次执行的结果，这就是computed 缓存。

2. Watch 侦听

例子1：实现简单撤销功能

new Vue({
    data: {
        n: 0,
        history: [],
        inUndoMode:false
    },
    watch: {
        n(newValue,oldValue){
            if(!this.inUndoMode){
                this.history.push({from:oldValue,to:newValue})
            }
        }
    },
    template: `
      <div>
          {{ n }}
          <hr/>
          <button @click="add1">+1</button>
          <button @click="add2">+2</button>
          <button @click="minus1">-1</button>
          <button @click="minus2">-2</button>
          <hr/>
          <button @click="undo">撤销</button>
          <hr/>
          {{history}}
      </div>
    `,
    methods:{
        add1(){
            this.n++
        },
        add2(){
            this.n += 2
        },
        minus1(){
            this.n--
        },
        minus2(){
            this.n -=2
        },
        undo(){
            const last = this.history.pop()
            const old = last.from
            this.inUndoMode = true
            this.n = old
            this.$nextTick(() => {     // 等待 watch 异步执行完毕
                this.inUndoMode = false
            },0)
        }
    }
}).$mount('#app')

例子2：用 watch 对 computed 的模拟

    data: {
        user: {
            email: 'akane@qq.com',
            nickname: 'akane',
            phone: '18812345678'
        },
    },
    watch: {
        'user.email': {      //  第二层属性的写法
            handler(){
                const {user: {email, nickname, phone}} = this    // 解构赋值
                this.displayName = nickname || email || phone
            },
            immediate:true     // 立刻执行
        },
        'user.phone': {
            handler(){
                const {user: {email, nickname, phone}} = this    // 解构赋值
                this.displayName = nickname || email || phone
            },
            immediate:true     // 立刻执行
        },
        'user.nickname': {
            handler(){
                const {user: {email, nickname, phone}} = this    // 解构赋值
                this.displayName = nickname || email || phone
            },
            immediate:true     // 立刻执行
        }
    },
    template: `
      <div>
      {{ displayName }}
      <button @click="user.nickname=undefined">remove nickname</button>
      </div>
    `,
    methods: {
        changed() {
            const user = this.user
            this.displayName = user.nickname || user.phone || user.email
        }
    }
}).$mount('#app')

当按下按钮之后其中的数据立刻改变，但是methods中的方法并没有更新，简陋地模拟了computed的运行。
计算属性与watch的选择：
计算属性主要着重依赖之间的变化以及缓存，而 watch 主要侧重数据变后执行函数操作，而不一定需要返回数据。

2.1 watch的 deep 选项

watch监听数据变化，那么什么样属于数据变了？
简单类型看值，复杂类型（对象）看地址。
其实就是===原则。
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a",
      b: "b"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj: {
      handler() {
        console.log("obj 变了");   // 将obj变成对象，用handler执行，可以监控obj内部所有的数据
      },
      deep: true    // // 该回调将会在侦听开始之后被立即调用
    },
  }
}).$mount("#app");

2.2 watch 的用法总结

2.21 watch:{}

watch{
  // 不可以使用箭头函数，箭头函数的this是全局变量，并不是new Vue的实例本身。
  o1: function(value, oldvalue){},
  o2(){},
  o3: [f1, f2],
  o4: 'methodName',
  o5: {handler:fn, deep:true, immediate:true},
  'object.a': function(){}
}

2.22 vm.$watch

vm.$watch('xxx', fn, {deep:..., immediate:...})  // 其中'xxx'可以改为返回字符串的函数

3. computed和watch的区别

computed：是计算属性，根据依赖的数据进行计算并更新，这个计算结果是会被缓存的。
用法上，computed不用加括号，直接当做属性一样使用。
watch：是个侦听器，监听依赖数据的变化，并进行处理，一般不需要得到计算结果。
watch有两种选项，1.immediate 表示是否在第一次渲染时执行这个函数。2.deep 表示在监听一个对象时，是否要看里面的属性的变化。