当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue之watch属性使用方法

vue之watch属性使用方法

2019年10月17日  | 移动技术网IT编程  | 我要评论

vue之watch属性使用方法

vue中使用了watch侦听属性用来监听和响应 vue实例上的数据变动.
下面的代码展示的是watch属性的完整用法，在工作中发现可以根据不同的情况使用watch属性有三种不同的写法

new vue({
     el: '#myvue',
     data: {
       people: {id: 1, name: 'tom'}
     },
     watch: {
       people: {
         handler(newname, oldname) {
       },
       deep: true,
       immediate: true
       }
     } 
   })

用法一：基本的监听数据

当每次监听到 cityname 值发生改变时，执行handler函数；
这种用法有个特殊的地方：当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行

new vue({
     el: '#myvue',
     data: {
       title:'123'
     },
     watch: {
       title: function(val){ //（new, old） new:变化后的值；old：变化前的值
            console.log(val)  // 打印出title变化后的数据
       }
     } 
   })

用法二：immediate和handler

方法一有个不足的地方就是我们在初始值的时候不会执行handler方法。为了解决这个问题我们就需要用到immediate属性了
使用场景：父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，
这时只需要将immediate设为true就行了。

new vue({
     el: '#myvue',
     data: {
       people: {id: 1, name: 'tom'}
     },
     watch: {
       people: {
        immediate: true
         handler(val) {
            console.log(val)
       }
       }
     } 
   })

用法三：deep

监听一个对象的变化时，普通的watch方法无法监听到对象内部属性的变化，这时就需要使用deep属性对对象进行深度监听。

new vue({
  el: '#vmyvue',
  data: {
    student: {id: 1, name: 'tom',sex: '男'}
  },
  watch: {
    student: {
      handler(val) {
        console.log(val)
    },
    deep: true,
    }
  } 
})

这种写法有个问题就是会监听对象中的全部的属性变化，只要有一个属性发生变化就会执行handler函数.在实际项目中我们
可能只需要监听对象中的某一个属性。这时我们可以使用字符串的形式监听对象属性：
下面的代码只会监听对象中的name属性，只有name属性发生变化的时候才会触发handler函数

new vue({
  el: '#vmyvue',
  data: {
    student: {id: 1, name: 'tom',sex: '男'}
  },
  watch: {
    'student.name': {
      handler(val) {
        console.log(val)
    },
    deep: true,
    }
  } 
})

上面的就是我对vue中监听属性watch学习总结，如果总结有问题的话希望大佬能够指出！！！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网