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");
- immediat：ture表示让值最初时候watch就执行
- deep表示对对象里面的变化进行深度监听
- 不支持缓存，数据变，直接会触发相应的操作
如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。
watch 支持异步代码而 computed 不支持。
