vue watch的immediate和deep

1. immediate

• immediate表示立即执行的意思，这样就是说不用等到value变化才会执行，默认的时候就会立刻执行一次。
  假设我们页面上有一个搜索框，每次输入内容的时候去请求一个接口，同时一进页面的时候需要调一下这个接口，我们可能一般这样写：

<!--作者：zhangfan
页面名称：watch的immediate和deep--> 
<template>
  <div id="product-list-one">
    <label>
      这是一个输入框：
      <input type="text" v-model="value" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "zhangfan"
    };
  },
  watch: {
    value: "getData"
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData: function() {
      console.log(this.value);
    }
  }
};
</script>

<style scoped>
</style>

我们将这个输入框的内容绑定一个变量value，同时利用watch去监视value有没有发生变化，如果变化了就是调用getData，然后在mounted里面调用getData，因为已进入的时候需要调用一次。

其实上面的第一次调用getData可以在watch中配置一个immediate，就像这样：

<!--作者：zhangfan
页面名称：watch的immediate和deep--> 
<template>
  <div id="product-list-one">
    <label>
      这是一个输入框：
      <input type="text" v-model="value" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "zhangfan"
    };
  },
  watch: {
    value: {
      handler: "getData",
      immediate: true
    }
  },
  methods: {
    getData: function() {
      console.log(this.value);
    }
  }
};
</script>

<style scoped>
</style>

• immediate表示立即执行的意思，这样就是说不用等到value变化才会执行，默认的时候就会立刻执行一次。handler表示需要调用的方法。

2. deep

• 如果我们用watch监视一个对象的时候，往往得不到正确的结果，例如：

<!--作者：zhangfan
页面名称：watch的immediate和deep--> 
<template>
  <div id="product-list-one">
    <label>
      这是一个输入框：
      <input type="text" v-model="obj.email" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        email: "[email protected]"
      }
    };
  },
  watch: {
    obj: {
      handler: "getData"
    }
  },
  methods: {
    getData: function() {
      console.log(this.obj.email);
    }
  }
};
</script>

<style scoped>
</style>

• 我们定义了一个对象obj，将输入框和obj.email进行绑定，那么我们利用watch去监测obj，那么当输入框输入内容的时候，watch的obj是不会触发的。
• 此时可以用deep，因为用watch去监测obj，只有obj发生变化才会触发，如果是obj.email变化则没反应，如果用deep的话，表示可以监测到obj的下层变动：

<!--作者：zhangfan
页面名称：watch的immediate和deep--> 
<template>
  <div id="product-list-one">
    <label>
      这是一个输入框：
      <input type="text" v-model="obj.email" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        email: "[email protected]"
      }
    };
  },
  watch: {
    obj: {
      handler: "getData",
      deep: true
    }
  },
  methods: {
    getData: function() {
      console.log(this.obj.email);
    }
  }
};
</script>

<style scoped>
</style>

• 但是如果用deep的话，还会有一些副作用，假如obj还有一个age的属性，那么age属性的变动也会被监测到。如果只是想单纯的监测obj.email的变动，直接监测’obj.email’可能会更好：

<!--作者：zhangfan
页面名称：watch的immediate和deep--> 
<template>
  <div id="product-list-one">
    <label>
      这是一个输入框：
      <input type="text" v-model="obj.email" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        email: "[email protected]"
      }
    };
  },
  watch: {
    "obj.email": {
      handler: "getData"
    }
  },
  methods: {
    getData: function() {
      console.log(this.obj.email);
    }
  }
};
</script>

<style scoped>
</style>

注意,watch中不要用箭头函数，watch观察的对象不能用箭头方法，否则this是undefined。