一、说明

在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面会详细介绍下watch的使用

二、使用

1、单纯的对值进行监听,当demo的值发生变化时,value的值也会随着变化,直接看代码:

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

2、对对象进行监听,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成:

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

3、监听数组的变化:

<div id="app">
  <input type="text" v-model="childrens.name" />
  <input type="text" v-model="lastName" />
</div>

<script type="text/javascript">
  var vm = new Vue( {
    el: '#app',
    data: {
      childrens: {
        name: '小强',
        age: 20,
        sex: '男'
      },
      tdArray:["1","2"],
      lastName:"张三"
    },
    watch:{
      //以V-model绑定数据时使用的数据变化监测
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true  // 对象内部的属性监听,也叫深度监听
      },
      // 键路径必须加上引号
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },  
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },
  } );
  //主动调用$watch方法来进行数据监测
  vm.$watch("lastName",function(val,oldval){
    console.log(val)
  })
</script>
</body>

三、补充

immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。我们拿第一个例子的代码来说明下immediate和handler的使用方法。

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
        // handler的使用
        handler(newName, oldName) {
         console.log(newName)
          console.log(oldName)
      },
       // immediate的使用
      immediate: true
      }
    }
  };
</script>

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

Logo

前往低代码交流专区

更多推荐