computed-计算属性

computed是计算属性，会根据你所依赖的数据动态显示新的计算结果。
如果依赖没有变化，就不会重新计算。
不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
computed在使用时默认的 function 是 get函数，set 函数要自己加，当数据变化时调用set函数。
computed里面的getter和setter默认不会做缓存，vue做了特殊处理。
调用这个值时，不需要加括号，可以直接当属性用。

let id = 0;
const createUser = (name, gender) => {
id += 1;
return { id: id, name: name, gender: gender };
};
new Vue({
data() {
return {
users: [
    createUser("方方", "男"),
    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");

Watch-侦听

当数据变化时，执行一个函数
不支持缓存，数据变，直接会触发相应的操作。
watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
不能用箭头函数来定义里面的函数，this的指向会变。 watch有两种写法：
语法一：


watch:{
  obj1:function(value,oldValue),  //function的参数是 Vue 传给我们的，一个最新值，一个旧值
  obj2(){},     //ES6缩写
  obj3:[f1,f2],     //两个函数，依次执行f1和f2
  obj4:'methodName',  //去methods里面找对应名字的函数
  obj5:{handler:fn,deep:true,immediate:true}//function有些webpack版本可以省去
  'object.a':function(){}
}

语法二

vm.$watch('obj',fn,{deep:...,immediate:...})

immediate

根据 Vue 本身的逻辑，watch是监听属性，监听的是数据的变化，而第一次渲染的时候，是一个从无到有的过程，是一个开始，而不算变化。所以 Vue 默认第一次渲染的时候不执行watch。但 Vue 提供了 immediate 方法用于表示在第一次渲染的时候是否要执行 watch。

immediate：true/false        //true执行，false不执行，默认false

deep

在 Vue 的数据中，复杂类型存地址，简单类型存数值。简单类型的数据如数字，改变了值就是直接改变了。但对于对象而言，地址没变，对象就没变。对象里面的属性变了，对象依旧不变。Vue 提供了 deep 方法用于判断是否要看这个对象里面的属性的变化。

deep：true/false     //true就判断对象内的属性，默认flase

总结

如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且并且执行一些函数就用 watch

Vue中computed和watch的区别

computed-计算属性

Watch-侦听

总结