vue中的watch的用法
前端  /  管理员 发布于 5年前   122
在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>
使用watch时有一个特点,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
当需要监听一个对象的改变时,普通的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 } },
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号