computed 和 watch

computed - 计算属性

被计算出来的属性就是计算属性
那么计算属性具体如何使用呢？我们先展示一个简单的实现表展示的代码：

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
  id += 1;
  return { id, name, gender };
};
new Vue({
  data() {
    return {
      users: [
        createUser("方方", "男"),
        createUser("圆圆", "女"),
        createUser("小新", "男"),
        createUser("小葵", "女")
      ],
      displayUsers: []
    };
  },
  created() {
    this.displayUsers = this.users;
  },
  methods: {
    showMale() {
      this.displayUsers = this.users.filter((u) => u.gender === "男");
    },
    showFemale() {
      this.displayUsers = this.users.filter((u) => u.gender === "女");
    },
    showAll() {
      this.displayUsers = this.users;
    }
  },
  template: `
    <div>
      <div>
      <button @click="showAll">全部</button>
      <button @click="showMale">男</button>
      <button @click="showFemale">女</button></div>
      <ul>
        <li v-for="(u,index) in displayUsers" :key="index">
          {{u.name}} - {{u.gender}}
        </li>
      </ul>
    </div>
  `
}).$mount("#app");

有如上代码我们可以得到： computed 和 watch 当我们点击男时展现男，点击女时展现女，点击全部时展现全部人，看起来很精妙的一个小程序，可是如果我们客户的需求过多，要求我们添加多个按钮，那么这样的操作会不会过于繁琐了呢？我们这时候可以使用computed让代码变得更加好懂:

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>
  `

在使用了computed之后我们就不要在每点击一个按钮之后再去写相应的逻辑了，computed让我们的代码变得更加清晰了。但是如果以来的属性没有发生变化，就不会进行重新计算，也就是我们的computed是默认有缓存的，还是上面的例子我们第一次点击：全部，男，女的时候，displayUsers会进行计算，但是我们再进行第二次点击相同按钮的时候，就不会再重复计算了，这是一种Vue的思路，下面我们来说一下watch

watch - 侦听

当数据变化时，执行一个函数
那么什么叫做数据变化呢？具体要如何使用呢？我们举一个例子：

// 引用完整版 Vue
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  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() {
      console.log("obj 变了");
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

obj原来是{a:'a'},现在obj={a:'a'}：obj改变了，因为地址改变了;obj.a没变。简单的类型就看值，复杂类型看地址。这里要提到一个deep:true是干什么的。我们在监听obj的时候默认是一个浅的比较：

obj:{
    handler(){
    console.log("obj 变了");
    },
    deep:true
    },

此时我们加上了deep:true,Vue会认为我们需要通知一下obj被改变了，这样我们就不用监听里面的每一个属性，只需要监听obj就相当于监听了里面所有的属性。deep的意思就是监听obj的时候是否往深处看，默认是false。
下面我们来说一下watch的完整语法：

watch:{
  o1:()=>{}//别用这种，这里的this是全局对象
  o2:function(value,oldValue){},
  o3(){},
  o4:[f1,f2],
  o5:'methodName',
  o6:{handler:fn,deep:true,immediate:true},
  'object.a':function(){}
}

还有一种写法：

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

上面的例子可以加上：

vm.$watch('n',function(){
  console.log('n changed')
},{immediate:true})

总的来说computed和watch的区别？

computed是计算属性，watch是监听。
computed在调用值的时候不需要加括号，可以当属性用；而且它根据依赖会自动缓存，即如果依赖不变，computed的值就不会被重新计算
watch有两个选项，immediate表示是否在第一次渲染的时候要执行这个函数，deep表示如果我们监听一个对象我们是否要看更深层次的变化；当一个属性发生变化，我就去执行一个函数就是watch