1.computed 计算属性
在模板内进行简单运算十分方便，而这也是设计它们的初衷，但是在模板里会让模板过重且难以维护，例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
- 用途
因此，对于复杂得逻辑，应当使用 计算属性。
计算数形函数将被作为同名属性的getter 和 setter。
当你有一些数据需要随着其它数据变动而变动时，最好是使用计算属性。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。
小例子：实现列表的筛选功能
new Vue({
data() {
return {
users: [
createUser("akane", "女"),
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 中的计算可以放在 methods 里实现，结果相同，然后不同的是计算实行是基于响应式以来进行缓存的。计算属性函数在数据没有发生变化的时候不会执行函数，保存上一次执行的结果，这就是computed 缓存。
2. Watch 侦听
例子1：实现简单撤销功能
new Vue({
data: {
n: 0,
history: [],
inUndoMode:false
},
watch: {
n(newValue,oldValue){
if(!this.inUndoMode){
this.history.push({from:oldValue,to:newValue})
}
}
},
template: `
<div>
{{ n }}
<hr/>
<button @click="add1">+1</button>
<button @click="add2">+2</button>
<button @click="minus1">-1</button>
<button @click="minus2">-2</button>
<hr/>
<button @click="undo">撤销</button>
<hr/>
{{history}}
</div>
`,
methods:{
add1(){
this.n++
},
add2(){
this.n += 2
},
minus1(){
this.n--
},
minus2(){
this.n -=2
},
undo(){
const last = this.history.pop()
const old = last.from
this.inUndoMode = true
this.n = old
this.$nextTick(() => { // 等待 watch 异步执行完毕
this.inUndoMode = false
},0)
}
}
}).$mount('#app')
例子2：用 watch 对 computed 的模拟
data: {
user: {
email: 'akane@qq.com',
nickname: 'akane',
phone: '18812345678'
},
},
watch: {
'user.email': { // 第二层属性的写法
handler(){
const {user: {email, nickname, phone}} = this // 解构赋值
this.displayName = nickname || email || phone
},
immediate:true // 立刻执行
},
'user.phone': {
handler(){
const {user: {email, nickname, phone}} = this // 解构赋值
this.displayName = nickname || email || phone
},
immediate:true // 立刻执行
},
'user.nickname': {
handler(){
const {user: {email, nickname, phone}} = this // 解构赋值
this.displayName = nickname || email || phone
},
immediate:true // 立刻执行
}
},
template: `
<div>
{{ displayName }}
<button @click="user.nickname=undefined">remove nickname</button>
</div>
`,
methods: {
changed() {
const user = this.user
this.displayName = user.nickname || user.phone || user.email
}
}
}).$mount('#app')
当按下按钮之后其中的数据立刻改变，但是methods中的方法并没有更新，简陋地模拟了computed的运行。
计算属性与watch的选择：
计算属性主要着重依赖之间的变化以及缓存，而 watch 主要侧重数据变后执行函数操作，而不一定需要返回数据。
2.1 watch的 deep 选项
watch监听数据变化，那么什么样属于数据变了？
简单类型看值，复杂类型（对象）看地址。
其实就是===原则。
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
new Vue({
data: {
n: 0,
obj: {
a: "a",
b: "b"
}
},
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() {
console.log("obj 变了"); // 将obj变成对象，用handler执行，可以监控obj内部所有的数据
},
deep: true // // 该回调将会在侦听开始之后被立即调用
},
}
}).$mount("#app");
2.2 watch 的用法总结
2.21 watch:{}
watch{
// 不可以使用箭头函数，箭头函数的this是全局变量，并不是new Vue的实例本身。
o1: function(value, oldvalue){},
o2(){},
o3: [f1, f2],
o4: 'methodName',
o5: {handler:fn, deep:true, immediate:true},
'object.a': function(){}
}
2.22 vm.$watch
vm.$watch('xxx', fn, {deep:..., immediate:...}) // 其中'xxx'可以改为返回字符串的函数
3. computed和watch的区别
computed：是计算属性，根据依赖的数据进行计算并更新，这个计算结果是会被缓存的。
用法上，computed不用加括号，直接当做属性一样使用。
watch：是个侦听器，监听依赖数据的变化，并进行处理，一般不需要得到计算结果。
watch有两种选项，1.immediate 表示是否在第一次渲染时执行这个函数。2.deep 表示在监听一个对象时，是否要看里面的属性的变化。
