wacth监听的使用

   const vm = new Vue({
      el:"#app",
      data:{
        num:1
      },
      methods:{   // 数据变化
        handle(){
          this.num++
        }
      },
      watch:{
        num:{    // 监听数据
          handler(){ //数据发生变化时 会触发handler函数
            console.log(12)
          },
          deep:true   //深度监听
        }
      },
    })
    

在局部的watch中 监听的函数 参数是没有改变的数据 和改变后的数据
有两个参数 [触发函数 | 深度监听]

数据是数字或者字符串 变化时会触发监听  渲染页面
数据是Arr 不用七大数组方法 不会触发监听 不会渲染到页面 
		深度deep:true也不行 
数据是对象  直接点属性赋值 需要添加 deep:true 才会触发监听  
	没有添加 不会触发监听 会渲染数据   
	在vue文档中 所有对象都要添加deep:true才会被监听到
对象在被监听可以整个对象 也可以是单个数据

在全局的Vue. w a c t h l e t f u n = V u e . wacth let fun = Vue. wacthletfun=Vue.watch( [obj|arr|num|str],callback,{} )
全局函数会返回一个取消监听的函数 执行fun() 会取消监视
参数中的对象{
deep:true ,
immediate:true //vue实列加载时执行一监听
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值