vue watch 的简单使用
在项目开发中遇到的需求,这点写第一个dome
监听父组件传过来的值发送变化
在子组件中
<template>
<div class="components">{{mes}}</div>
</template>
<script>
export default {
props:['message'],//父组件传过来的值
data(){
return{
mes:1
}
},
watch:{
//最普遍的用法,当传过来的message变化时才会去监听并执行
// newval 新值
// odlval 旧的值
// message(newval,odlval){
// this.mes = newval
// },
// 如果想让值在最初的时候就执行,需要用到一下两个属性'handler','immediate'
// 代表在wacth里声明了message这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
message:{
handler(newval,oldval){
this.mes = newval
},
immediate:true//第一次进来就开始监视,而不是等到下次数据改变了才执行
}
}
}
</script>
监听data里面的状态发生变化
1 watch:{ 2 amends(newval,odlval){ //amends是data里面的定义的状态,红色处不用加this,其他写法参考上面的 3 //处理逻辑4 } 5 }
监听对象的改变
//普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
每个属性变化都会执行
watch: { amends: { handler(newName, oldName) { // ... }, deep: true,//设置为true可以监听对象 immediate: true } }
监听对象里面的属性
监听指定的属性
watch: { 'amends.name': { handler(newName, oldName) { // ... }, deep: true, immediate: true } }