第四篇、vue组件生命周期 beforeDestroy()和destroyed()

最新推荐文章于 2024-05-17 13:52:13 发布

前端小灰机

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量2.6k

点赞数

文章标签： javascript 前端开发语言 vue.js 前端框架

本文链接：https://blog.csdn.net/qq_59474517/article/details/125634784

版权

beforeDestroy()

实例销毁前，数据实例方法都有但是没什么用

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    mounted() {
      this.timmer= setInterval(() => {
        console.log(1)
      }, 1000);
    },
    beforeDestroy() {

      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    },

  })

  new Vue({
    data: {
      show: true,
    },
    methods: {
      toggle() {
        this.show = !this.show
      }
    }
  }).$mount('#app')

destroyed()

实例销毁后，用于清除定时器、网络请求等还未结束的操作


  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    mounted() {
      this.timmer= setInterval(() => {
        console.log(1)
      }, 1000);
    },

    destroyed() {

      clearInterval(this.timmer)
      console.log('销毁结束')
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    }
  })

  new Vue({
    data: {
      show: true,
    },
    methods: {
      toggle() {
        this.show = !this.show
      }
    }
  }).$mount('#app')