vue中watch的用法
其实watch它是对data中的数据监听回调,当data中的数据发生变化的时候。监听就会被回调函数中传入两个参数一个newVal另一个为oldVal。
watch的使用场景:当data中的某个数据发生变化时,我们需要做一些异步操作以及开销较大的操作。我们就可以是用watch进行监听。
watch监听基本数据::
<template>
<div class="contain-wrap">
<p>个人信息情况: {{ basicMsg }}</p>
<p>今年的年龄: <input type="text" v-model="age" /></p>
</div>
</template>
<script>
export default {
name: "about",
components:{},
data() {
return {
basicMsg: '',
age:"18",
single: '单身'
}
},
watch:{
age:{
handler(newValue,oldValue) {
console.log("我是新值",newValue)
console.log("我是旧值",oldValue)
this.basicMsg = '今年' + newValue + '岁' + ' ' +this.single;
}
}
},
created() {},
methods:{},
mounted(){},
}
</script>
<style scoped lang="scss">
</style>
现在是监听data中一个基本的数据,当我们在输入框中输入数据,那么就监听这个回调就会被触发。现在有个需求我们想要在页面首次加载的时候让它进行触发一次。我们可以在这个回调函数中添加一个immediate: true属性,就可以第一次加载的时候触发回调。
深度监听data中的数据:
需要在watch回调中设置deep属性,表示是否深度监听某个对象的值
<template>
<div class="contain-wrap">
<p>个人信息情况: {{ basicMsg }}</p>
<p>今年的年龄: <input type="text" v-model="obj.chidren.age" /></p>
</div>
</template>
<script>
export default {
name: "about",
components:{},
data() {
return {
obj:{
basicMsg: '',
chidren:{
age:"18"
},
single: '单身'
},
}
},
watch:{
'obj.chidren': {
handler(newVal, oldVal) {
this.basicMsg = '今年' + newVal.age + '岁' + ' ' + this.obj.single;
},
immediate: true,
deep: true // 需要添加deep为true即可对obj进行深度监听
}
},
created() {},
methods:{},
mounted(){},
}
</script>
<style scoped lang="scss">
</style>
现在就为对象obj中的age属性进行监听,当age属性发生变化的时候就会进行触发。这也同样适用于数组
watch 和 computed的区别是:
相同点:他们两者都是观察页面数据变化的。
不同点:computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。