华山资源网

Vue.js watch监视属性知识点总结
网络编程 2024/12/25 佚名
3 1

这个属性用来监视某个数据的变化，并触发相应的回调函数执行

1.基本用法

(1)添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行

(2)回调函数有2个参数：

newVal：数据发生改变后的值

oldVal：数据发生改变前的值

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

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

执行结果:

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

2.监听对象内部属性的变化

前面的例子只是监听data中的第一层数据，如果要监听多层次的数据，例如a.b.c，则属性名需要用引号包裹起来

<body>
  <div id="app">
    <p>{{name}}</p>
    <button @click="test">修改wife.name</button>
    <button @click="test2">修改wife</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data: {
      name: '郭靖',
      age: 20,
      wife: {
        name: '黄蓉',
        sex: '女'
      }
    },
    watch: {
      //监听wife中的name属性
      'wife.name'(newVal,oldVal){
        console.log('wife.name发生了改变')
      },
      //监听wife
      'wife'(newVal,oldVal){
        console.log('wife发生了改变')
      }
    },
    methods:{
      test(){
        this.wife.name = "'黄帮主'"
      },
      test2(){
        this.wife = {name:'我不是黄蓉',sex:'women'}
      }
    }
  })
</script>

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

Vue.js watch监视属性知识点总结

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监视属性的全部知识点，感谢大家的学习和对的支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com