computed
计算属性的意思。它会根据所依赖的数据动态显示新的结果，计算结果将会被缓存。当依赖的属性没有发生变化，那么调用当前函数的时候会从缓存中读取。
例：
// 引用完整版 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");
watch
监听的意思。它更像一个data的数据监听回调，当依赖数的据发生变化时，就会执行相应的函数。方法上是去监听传入属性的新旧值(new Value和oldValue)。用于监听和观察页面上的vue实例，当数据变化时执行异步操作。
接受两个选项
- immediate.表示在第一次渲染时是否执行该函数
- deep. 表示监听一个对象时是否看它里面的属性
