What is the text about?

Experience in using Watch in vuE2 complex project. (If there is any wrong place, welcome friends to guide)

Who’s it for?

It is suitable for beginners and intermediate vuE2 learners, and maintenance of old vuE2 project development friends.

Why write this article?

In the process of maintaining vue2 project, I found that I didn’t have a deep understanding of Watch and a clear understanding of their working process. For example, will Watch be executed when the component is initialized? When watch listens on an object, will watch be triggered when a new property is added to the object? There are many other questions that I can’t give an accurate answer to, so today XIAobian is determined to put an end to these questions. If you are interested in these questions, please follow me to see them!

Some questions about watch

Will watch execute on initialization?

When watch listens for an object, whether or not you refer to the object in your HTML template, it will not trigger if you do not change the object reference during the initial rendering of the component. A similar situation in a project would be to define an object in data, then request the interface at render time, and assign the data returned by the interface to the object. At this point, Watch will listen to the change of this object and trigger the callback function in Watch.

What other data changes can watch monitor without deep monitoring?

When we watch an object, if deep is not true, the data changes monitored by the watch are very limited.

<template>
  <div style="margin-left: 20px">
    <lk-button @click="handleClick">Click on the</lk-button>
  </div>
</template>
<script>
watch: {
    testobj: {
      handler() {
        console.log('testobj-changed'); }}},data() {
    return {
      testobj: {
        a: 1}}; },methods: {
    handleClick() {
      this.testobj.b = 2; / / the first
      this.$set(this.testobj, 'b'.2); / / the second
      this.testobj = {}; / / the third kind
      this.testobj.a = 2; / / the fourth
      console.log(this.testobj); }},</script>
Copy the code

If I add a b attribute to testobj when I click a button, watch will not be triggered by the first assignment in the handleClick method. However, the second method can trigger the watch. If the third assignment is followed, watch will definitely be triggered. In the fourth assignment, even if a attribute already exists in the data object and A is responsive, the re-assignment of A in the click method cannot trigger watch.

Question and ponder: In this case, MY understanding of watch may be a little confused, because if DEEP is not added, WATCH will not be triggered if I do not use the reactive set method to add any new attributes to the object or change the value of the existing attributes. However, once I use the reactive set method to add new attributes to the object, watch will be triggered. My guess is that $set may have rewrapped the object so that the reference to the object has changed so that watch can fire.

What data changes will watch listen for with deep?

<template>
  <div style="margin-left: 20px">
    <lk-button @click="handleClick">Click on the</lk-button>
  </div>
</template>
<script>
watch: {
    testobj: {
      handler() {
        console.log('testobj-changed');
      },
      deep: true}},data() {
    return {
      testobj: {
        a: 1,},b: 2}; },handleClick() {
      this.testobj.a = this.b++; / / the first
      this.testobj.a = 2; / / the second
      this.testobj.a = {}; / / the third kind
      this.testobj.b = 2; / / the fourth
      this.$set(this.testobj, 'b'.this.b++); / / 5 kinds
      // this.$set(this.testobj, 'a', 2);
      // this.$set(this.testobj, 'a', 2);
      // this.testobj.a = {};
      // Object.defineProperty(this.testobj, 'b', {
      // value: 2
      // });
      console.log(this.testobj);
    }
</script>
Copy the code

When deep is used in Watch, the first and third assignments to property A defined in data will trigger the Watch callback all the time. When the second assignment is used, only one callback is triggered. When the fourth method is used, watch is not triggered. When using the fifth, the watch is constantly triggered. Thinking and conclusion: Watch can only monitor the change of responsive attribute. When this attribute is responsive, once the value of this attribute changes and the value of this attribute is a simple data type, such as number and String, watch will be triggered when the value changes. If the values are the same, watch will not be triggered again. Reactive properties contain properties set with $set.