一、computed
computed是计算属性的意思, 根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。
计算结果会被缓存，如果数据没有发生改变则使用缓存，不会重新加载。
<template>
<div class="hello">
{{fullName}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: '张',
lastName: "三"
}
},
props: {
msg: String
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>
二、watch
watch 是用来监听数据的。主要用法是当某个数据变化后，做一些操作。
当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）
watch有两个属性：deep 和 immediate
deep就是要监听对象里面的嵌套属性
immediate就是第一次渲染时是否执行watch的函数
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");
