An article explaining in detail how to cancel subscription in Vue

Vue is a very popular JavaScript framework, especially widely used in front-end development. Vue provides many convenient features, one of which is the subscribe function. Subscription is an event mechanism through which we can monitor changes in certain data in the Vue instance. However, sometimes we need to cancel these subscriptions, which requires the cancellation function provided by Vue. This article will detail how to cancel a Vue subscription.

Subscription Basics

In Vue, subscription is implemented through watch and computed. watch implements the listening and callback of a specific data attribute, and computed calculates the value of an attribute based on the value of one or more attributes. We can define a subscription through watch and computed, for example:

data() {
  return {
    name: '',
    age: '',
    fullName: '',
  }
},
watch: {
  name: function(newName) {
    this.fullName = 'My name is ' + newName
  },
  age: function(newAge) {
    this.fullName = 'I am ' + newAge + ' years old'
  }
}
computed: {
  getFullName: function() {
    return this.fullName
  }
}

In the above code, we define three data attributes, namely name, age and fullName. In watch, we define two callback functions to monitor changes in name and age respectively. When name or age changes, the callback function will modify the value of fullName. In computed, we define a calculated property getFullName to get the fullName. In this way, when the subscription takes effect, we can monitor the changes in name and age and obtain the latest fullName through getFullName.

Unsubscribe

Now we know how to subscribe to the data in the Vue instance, but what should we do when we want to unsubscribe?

Vue provides two methods to unsubscribe: one is through the function returned by the watch method, and the other is through the cache attribute of the computed attribute.

Unsubscribe through watch

In Vue, the watch method will return a function. This function can be used to cancel the registered listener and implement the unsubscription function. For example, we can pass a property from the parent component to the child component and monitor the change of this property in the child component:

// 父组件
<template>
  <child-component :propA="propA" />
</template>
<script>
export default {
  data() {
    return {
      propA: '',
    }
  }
}
</script>

// 子组件
<script>
export default {
  props: ['propA'],
  watch: {
    propA(newPropA, oldPropA) {
      // do something
    }
  }
}
</script>

In the above code, we monitor the propA property through the watch method in the child component. Variety. When the parent component modifies the propA property, the watch method of the child component will be triggered and the corresponding callback will be executed. At the same time, the watch method returns a function. We can call this function when the component is destroyed to cancel the monitoring of the propA attribute and realize the function of canceling the subscription:

// 子组件
<script>
export default {
  props: ['propA'],
  data() {
    return {
      unwatch: null
    }
  },
  created() {
    this.unwatch = this.$watch('propA', (newPropA, oldPropA) => {
      // do something
    })
  },
  beforeDestroy() {
    this.unwatch()
  }
}
</script>

In the above code, we create in the subcomponent The watch method is called in the hook and the returned function is saved in the unwatch variable. Before the component is destroyed, we call the unwatch function to cancel monitoring of the propA attribute and implement the unsubscription function.

Unsubscribe through computed

In addition to unsubscribing through the function returned by the watch method, we can also implement the unsubscribe function through the cache attribute of the computed attribute. Cached properties of computed properties A computed property is a property that is cached when its dependencies have not changed. It improves application performance by eliminating the need for computed properties to be recalculated each time.

In Vue, when we use the computed property to calculate the value of a property, the compiler will create a cache property for this property. This cached property is an internal property and its value is the latest value of the computed property. We can cancel the subscription to the calculated property by accessing this cached property, thereby achieving the unsubscription function. For example:

// 组件
<template>
  <div>
    <p>Value: {{ value }}</p>
    <button @click="stopSubscribe">Stop subscribe</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 0,
    }
  },
  computed: {
    doubleValue() {
      return this.value * 2
    }
  },
  methods: {
    stopSubscribe() {
      this.doubleValue
    }
  }
}
</script>

In the above code, we define a component that contains a value property and a doubleValue calculated property. We cancel the subscription to this calculated property by accessing the doubleValue property to implement the cancellation function.

Conclusion

Subscription is a very important function in Vue. It can help us monitor data changes and respond in time. At the same time, when we no longer need to monitor data changes, we can also easily cancel the subscription. Through the above explanation, I believe you have understood how to cancel Vue subscription. I hope this article can be helpful to everyone!

The above is the detailed content of An article explaining in detail how to cancel subscription in Vue. For more information, please follow other related articles on the PHP Chinese website!