欢迎光临
我的个人博客网站

Vue——监听器watch

使用watch来侦听data中数据的变化,watch中的属性(watch是对象格式)一定是data 中已经存在的数据。

使用场景:数据变化时执行异步或开销比较大的操作。

典型应用:http://www.pinyinzi.cn/

a. 监听器监听data中数据的变化(当前)

b. 监听器watch属性值是一个对象

c. 监听器对象里的属性就是data中已经存在的数据的名

d. 监听器里面属性的值是一个处理函数。函数有2个形参:新值、旧值

e. watch默认只能监听字面量(data中的表面数据,不能监听data中的数组对象等里面数据的变化)

想要监听对象里面的数据,需要深度监听

        语法:

            objname: {handler(val),deep: true}

            函数handler参数就一个:对象是引用传值

            深度监听的处理函数的名字handler不能变其他的,只能是这个名字

 

watch与computed的区别?

    a. 在实现相同功能的时候,计算属性的代码复杂度要比监听器要低;

    b. 计算属性支持深度监听(默认)

 

后期使用上如何选择?

    a. 能用计算属性就用计算属性;

    b. 如果是异步等代码,这个时候可以优先考虑watch

    c. 在深度监听的时候建议考虑计算属性

    d. 只是学习测试的时候,看你心情

<div class='app'>             <input type="text" placeholder="姓" v-model="xing">             <input type="text" placeholder="名" v-model="ming">             <input type="text" placeholder="姓名" v-model="xm" >     </div>     </body> <script src='./js/vue.js'></script> <script>     new Vue({         el: '.app',         data: {             message: '',             directives: '',             xing:'',             ming:'',             xm:'',         },         watch:{             // 监听姓的变化,具有两个参数,分别表示新的数据和旧的数据             xing:function(x,j){                 // console.log(x,j);             // 将新的数据复制到“姓名”中             this.xm = x + this.ming             },             ming:function(x,j){                 this.xm = this.xing + x             }         }     })

深度监听:

将需要监听的数据放置到一个对象中,在html标签元素的自定义属性v-model的值上添加对象的名称,最后在监听中使用深度监听的语法

HTML语句 <input type="text" placeholder="姓" v-model="name.xing"> <input type="text" placeholder="名" v-model="name.ming"> <input type="text" placeholder="姓名" v-model="name.xm" > //数据: data: {        name:{           xing:'',           ming:'',           xm:'',            }  },  //监听: watch:{     // 监听这个对象      name:{      // 第一个值适用于监听的函数,具有一个参数,表示这个对象           handler(val){                // console.log(val)                val.xm = val.xing + val.ming                     },                     // 深度监听的标志                deep:true                 }             }

使用计算属性

HTML <input type="text" placeholder="姓" v-model="xing"> <input type="text" placeholder="名" v-model="ming"> <input type="text" placeholder="姓名" v-model="xm" > 直接在data里面添加: xing:'',             ming:'', 计算属性:  computed:{             xm(){                 return this.xing + this.ming             }         }

使用计算属性(深度):

HTML更改
<
input type="text" placeholder="姓" v-model="name.xing"> <input type="text" placeholder="名" v-model="name.ming"> <input type="text" placeholder="姓名" v-model="xm" >

数据修改
name:{ xing:
'', ming:'', }
计算属性
computed:{         xm(){         return this.name.xing + this.name.ming         }      }

 

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue——监听器watch
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏