Vue中watch的高级用法
Posted mydxy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中watch的高级用法相关的知识,希望对你有一定的参考价值。
<template> <div> <input type="text" v-model="value"> </div> </template> <script> export default data() return value:null , created() this.test() , methods: test() console.log("第一个加载") , watch: value(val) this.test() , </script>
上面的代码的效果是,页面第一次加载需要调用test方法,每次输入都要调用test方法
可以使用handler方法和immediate属性进行优化
immediate:true代表如果在 wacth 里声明了 test 之后,就会立即先去执行里面的handler方法,
如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
watch: value: handler:‘test‘, immediate:true , ,
这样可以每次输入调用test方法,当然要是你需要每次拿到值也可以这样写
watch: value: //handler:‘test‘, handler(val) console.log(val) , immediate:true , ,
deep的用法
watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性:
<template> <div> <input type="text" v-model="obj.a"> </div> </template> <script> export default data() return value:null, obj: a:null , created() , methods: test() console.log("第一个加载") , watch: obj: handler(val) console.log(val) , immediate:true, , , </script>
当我们在在输入框中输入数据视图改变obj.a的值时,我们发现是无效的
这时候可以使用deep
watch: obj: handler(val) console.log(val) , immediate:true, deep:true
也可以使用 字符串
watch: ‘obj.a‘: handler(val) console.log(val) , immediate:true, deep:true ,
以上是关于Vue中watch的高级用法的主要内容,如果未能解决你的问题,请参考以下文章