watch的使用

watch监听

基本数据类型的监听

最基础的用法，默认情况下

<template>

  <div class="watch">

    <input type="text" v-model="msg" />

    <h4>{{ title }}</h4>

  </div>

</template>

<script>

export default {

  data() {

    return {

      msg: '',

      title: ''

    }

  },

  watch: {

    msg(newVal, oldVal) {

      this.title = '学习使我' + newVal

    }

  }

}

</script>

一开始只有一个输入框，其他什么都没有，如图：

从图中我们可以看出，初始化的时候并没有执行 this.title = ‘学习使我’ + newVal 这行代码；也就是说正常情况下，它默认在初始化的时候不会执行；初始化后，当监听的值发生了改变，才会执行

输入文字后；这里初始化后，监听的变量发生改变，执行

删除输入的文字后，再次改变，执行

那么如果想在它初始化的时候就执行，该怎么办？

这时候就可以使用他的一个属性 immediate,默认情况下它为false；

现在我们将immediate设置为true

  watch: {

    msg: {

      handler: function(newVal, oldVal) {

        this.title = '学习使我' + newVal

      },

      immediate: true

    }

  }

初始化的时候，什么都没有输入的效果如下图；初始化的时候他就执行了watch里面的代码

复杂数据类型的监听

对象，数组的监听需要进行深度监听，需要用到deep属性

export default {

  data() {

    return {

      person: {

        name: ''

      },

      xingming: ''

    }

  },

  watch: {

    person: {

      handler: function(newVal, oldVal) {

        this.xingming = newVal.name

      }

    }

  }

}

当我们输入文本时，下面并没有显示对应的文字，如图：

这是因为我们监听的是复杂数据类型，需要对他进行深度监听，我们加将deep设置为true后

  watch: {

    person: {

      handler: function(newVal, oldVal) {

        this.xingming = newVal.name

      },

      deep: true

    }

  }

效果如下，我们输入之后，下面也跟着显示了

监听其他组件传过来的值

现在我们父组件中有个person变量，为对象类型，通过input可以修改它，我们把他传给了子组件，并且在子组件中被渲染出来

父组件代码：

<input type="text" v-model="person.name" />

<child :person="person"></child>

  data() {

    return {

      childrenName: 'happy',

      person: {

        name: '无名氏'

      }

    }

  }

子组件代码：

<template>

  <div class="watch">

    <h2>{{ person.name }}</h2>

  </div>

</template>

<script>

export default {

  props: {

    person: {

      type: Object,

      default: function() {

        return { name: '' }

      }

    }

  },

  data() {

    return {}

  }

}

</script>

现在我们进行监听，就可以拿到父组件中的数据了

  watch: {

    person: {

      handler: function(newVal, oldVal) {

        console.log(666)

      },

      immediate: true,

      deep: true

    }

  },

这里有个坑，子组件在接收复杂数据类型的手，不能直接给个默认值 {} 或 [] , 必须以函数的形式返回，不然会报错：

error Type of the default value for 'person' prop must be a function vue/require-valid-default-prop

props中的复杂数据类型的默认值， 必须是以函数中返回的形式，

ate: true,

  deep: true

}

},

这里有个坑，子组件在接收复杂数据类型的手，不能直接给个默认值 {} 或 [] , 必须以函数的形式返回，不然会报错：

`error  Type of the default value for 'person' prop must be a function  vue/require-valid-default-prop`

props中的复杂数据类型的默认值， 必须是以函数中返回的形式，

在这里不用加deep和immediate也能立即拿到数据，原因目前我也不知道