什么是属性检测(侦听属性)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。不能在模板上使用。