vue中的watch
在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:
<template>
<input v-model="example1"/>
<input v-model="example2"/>
<input v-model="example3.test"/>
</template>
<script>
export default {
data(){
return {
example1:"",
example2:"",
example3:{
test:1,
test1:2
}
}
},
watch:{
example1(curVal,oldVal){
console.log(curVal,oldVal);
},
example2:'a',//值可以为methods的方法名
example3:{
//数据为对象或数组时,curVal和oldVal是相等的,这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
console.log(curVal,oldVal)
},
deep:true,
immediate: true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
</script>
一.监听值变化
<input type="text" v-model="test_input" />
<script>
export default {
data(){
return {
test_input:""
}
},
watch:{
test_input(curVal,oldVal){
console.log(curVal,oldVal);
}
}
}
</script>
二.监听处理函数,在所监听的数据后面直接加字符串形式的方法名:
<input type="text" v-model="test_input" />
<script>
export default {
data(){
return {
test_input: "",
}
},
watch:{
test_input: "test_click",
},
methods:{
test_click() {
console.log(this.test_input);
}
}
}
</script>
三.监听对象变化
<input type="text" v-model="test_input.input_val" />
<script>
export default {
data(){
return {
test_input: {
input_val: "123",
test_btn: "saqd"},
}
},
watch:{
test_input: {
handler(curVal, oldVal) {
console.log("test_input", curVal, oldVal);
},
deep: true,//对象内部深遍历
immediate: true//最初绑定值的时候也执行监听
},
},
methods:{
test_click() {
console.log(this.test_input);
}
}
}
</script>
immediate
使用watch时有一个特点,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
设置deep: true 则可以监听到cityName.name的变化,此时会给cityName的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: {
test_input.input_val: {
handler(curVal, oldVal) {
console.log("example2", curVal, oldVal);
},
deep: true,
immediate: true
}
},
PS:以上内容仅供参考,如有疑问敬请指正。
转载于:https://my.oschina.net/ochmdlc/blog/3059180
上一篇: 知识梳理之@property
下一篇: 中国标准时间转日期YYYY-MM-DD