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实列加载时执行一监听
}

你可能感兴趣的:(vue.js)