vue watch的immediate和deep


1. immediate

  • immediate表示立即执行的意思，这样就是说不用等到value变化才会执行，默认的时候就会立刻执行一次。
    假设我们页面上有一个搜索框，每次输入内容的时候去请求一个接口，同时一进页面的时候需要调一下这个接口，我们可能一般这样写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--作者：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，就像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--作者：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监视一个对象的时候，往往得不到正确的结果，例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!--作者：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的下层变动：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--作者：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’可能会更好：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!--作者：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。