1. computed
使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
计算属性computed是基于data中的数据进行处理的，data数据变化，他也跟着变化
当data中的数据没有发生改变时，我们调用computed中的函数n次，只会进行缓存（执行一次）
根据一个现有数据去生成一个新数据，并且这两个数据会永久的建立关系，还会建立缓存，当无关数据改变的时候，不会重新计算而是直接使用缓存中的值。
<div id="app">
<p>{
{
fullName}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'si',
lastName: 'li'
},
computed: {
fullName() {
return this.firstName + this.lastName //必须有return，否则无法拿到结果
}
}
})
</script>
fullName 不需要在 data 中声明
2. watch
应用场景：处理异步（ajax，定时任务）或开销较大（耗时）的操作
watch：监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法；数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。
watch:l类似于监听机制+事件机制
在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
通俗来讲，既能用computed 实现又可以用 watch 监听来实现的功能，推荐用 computed，重点在于 computed 的缓存功能
// 这里直接用 v-model 来绑定，不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" /> {
{
tip}}
data() {
return {
nameValue: "",
tip: ""
};
},
methods: {
checkName(value) {
var that = this;
setTimeout(() => {
if (value == "admin") {
that.tip = "用户名已存在";
} else {
that.tip = "用户名可以使用";
}
}, 2000);
}
},
watch: {
// 数据变化时执行异步或开销较大的操作
nameValue(value) {
this.checkName(value);
this.tip = "正在验证......";
}
}
2.1 watch的高级用法
注意，上面的watch方法是当改变值的时候，才会触发监听事件，但是我们想刚进入页面的时候，就触发监听事件，就要用hander() 方法
1，handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
2，immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
3，deep:true；是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
deep:true
}
}
参考地址：
https://www.jianshu.com/p/a69a9bac9dc3
https://www.cnblogs.com/lk-food/p/12365949.html