Vue.js中watch监视属性知识点的示例分析-创新互联

var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖'
  },
  watch: {
    name(newVal,oldVal){
      console.log('name的值发生了变化')
      console.log(newVal,oldVal)
    }
  }
})

vm.name = "郭大侠" // 执行这行代码，会触发对应的回调函数

name的值发生了变化
郭大侠 郭靖

  
    
{{name}}
    修改wife.name
    修改wife
  

运行结果表明，无论是他父级对象的值发生了改变，还是它本身的值发生了改变，都会使这个监视属性的回调函数执行。

3.监听路由变化

提示：路由的路径信息保存在$route.path中

watch:{
 '$route.path':function(newval){
  console.log('change')
 }
}

4.深度监听

监视属性只能监听到当前对象值的变化，而对象内部的属性变化不会监听到，前面我们监听了wife和wife.name，修改了wife.name并不会触发监听wife的回调函数。

想要监听对象内部的属性值变化，需要进行相应的配置。

• deep:深度监听，默认false

• handler:回调函数

• immediate:页面初始化时是否触发回调，默认false

var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖',
    age: 20,
    wife: {
      name: '黄蓉',
      sex: '女'
    }
  },
  watch: {
    wife:{
      deep:true,
      handler:function(newVal,oldVal){
        console.log('value is change')
      },
      immediate:true
    }
  }
})

vm.wife.name = '黄帮主' // 触发wife属性对应的回调

以上是“Vue.js中watch监视属性知识点的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。