什么是属性检测（侦听属性）watch？
需要在数据变化时执行异步或开销较大的操作时，这个时候需要属性检测watch。而不要使用计算属性，因为计算属性是同步的（需要立即返回结果）。watch监听主要用来监听data中的数据 当data的数据改变了watch就会触发执行一些函数 方便我们再数据改变之后 完成一些功能。
语法：
watch:{
被侦听的属性名:'methods的里函数名' //数据名==data的key
被侦听的属性名:函数体(new,old){
}
被侦听的属性名:{
handler:function(new,old){
},
deep: true //面试题：深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
immediate: true //首次运行,要不要监听
}
}
1.handler方法 就是监听的数据改变之后触发的函数
2.watch在首次加载不会触发 如果我们想触发 必须使用immedate属性来开启首次加载监听
3,再就是watch默认不会监听到对象的属性的改变 如果我们想监听对象的属性改变 我们可以使用deep属性
这个属性来开启深度监听 但是开启deep会有一些问题 比如说新旧val相同或者是性能上的浪费因为 开启deep之后他会把这个对象的所有属性都监听到 浪费资源 我们也可以使用字符串方式设置监听内容 来提升性能
deep优化
"obj.name":{
handler(newval,oldval){
console.log(newval)
console.log(oldval)
},
deep:true //开启深度监听
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
{
{n}}<br><br>
<button @click="n++">加1</button><br><br>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/*
1.当被监听的属性发生改变时，自动调用回调函数
2.被监听的属性必须存在,（计算属性也可被监听）
3.监听的写法
a. Vue实例中
b. 全局
4.如果希望监听的元素，一上来就触发函数immediate:true
*/
let vm = new Vue({
el:"#root",
data:{
n:0,
},
computed:{
m:function(){
return this.n * 2;
}
}
//局部
//watch:{
//简写
// n:function(){
// console.log("heihei");
// }
//局部
// n:{
// handler:function(){
// console.log("heihei");
// },
// immediate:true
// }
//}
});
//全局
vm.$watch("n",{
handler:function(){
console.log("heihei");
},
immediate:true
});
vm.$watch("m",{
handler:function(){
console.log("haha");
},
immediate:true
});
</script>
深度检测：
深度监听:Vue中的监听只能监视第一层， 如果有需要进行多层监听，请用 deep:true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/*
深度监听:Vue中的监听只能监视第一层，
如果有需要进行多层监听，请用
deep:true
*/
let vm = new Vue({
el:"#root",
data:{
score:{
english:100,
math:50
}
},
watch:{
score:{
handler(){
console.log("heihei");
},
deep:true
}
}
});
</script>
计算属性 VS 函数 （方法）VS 属性检测
| 计算属性（computed） | 函数（methods） | 属性检测（侦听）（watch） | |
|---|---|---|---|
| 作用 | 为了显示而用 | 只是处理逻辑，跟普通的函数一样 | 属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数 |
| 依赖模板调用 | √（只能在模板上调用的） | √（可以在模板使用） | ×（不能在模板上使用） |
| 是否缓存 | √ | × | √ |
| 异步 | ×（必须是同步） | √（可以有异步） | √（可以有异步） |
解释：
本质： computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，当依赖的属性值发生改变时，才会重新计算
computed 的值，默认是只读的（相当于getter函数），它也可以设置getter和setter函数来完成读和写 watch：
更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.运用场景： computed：当我们需要进行数值计算，并且依赖于其它数据时，使用 computed。只用写同步代码，只能在模板上使用。
watch：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。不能在模板上使用。