computed 和 watch的区别

一、computed

computed是计算属性的意思, 根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存， 如果数据没有发生改变则使用缓存，不会重新加载。

写法

类型：{ [key: string]: Function | { get: Function, set: Function } }

 // 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;
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"); 

computed的 getter和setter

• computed的属性可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值).
• 一般情况下没有setter，computed只预设了getter，只能读取，不能设值。所以，computed默认格式（是不表明getter函数的）.
• 当赋值给计算属性的时候，将调用setter函数。

二、watch

类型：{ [key: string]: string | Function | Object | Array }

watch 是用来监听数据的。主要用法是当某个数据变化后，做一些操作。

当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）

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:{handler: function (val, oldVal) { console.log("obj 变了")},deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深},"obj.a":{handler: function (val, oldVal) { console.log("obj.a 变了")},immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用}}
}).$mount("#app"); 

1.immediat：ture表示让值最初时候watch就执行
2.deep表示对对象里面的变化进行深度监听
3.不支持缓存，数据变，直接会触发相应的操作

---

如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。

watch 支持异步代码而 computed 不支持。