vue 中监听生命周期事件的操作方式

目录

vue 中监听生命周期事件
常见的添加自定义事件的写法
希望在子组件挂载时通知父组件
在模板上监听组件生命周期
vue3 生命周期事件吗？
• jsx 中如何监听生命周期事件呢？
• 通过 vNode 操作 html
• vue3 父子组件的生命周期的执行顺序是怎样的？
• 小结

{
  mounted() {
      this.onResize = () => {
        console.log('onResize')
      }
      window.addEventListener('resize', this.onResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.onResize)
    }
}

{
  mounted() {
    const onResize = () => {
      console.log('onResize')
    }
    window.addEventListener('resize', onResize)
    // hook:lifeHook $once 只执行一次
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', onResize)
    })
  }
}

// SonComponent.vue
{
  mounted() {
    this.$emit('mounted')
  }
}

<template>
  <div>
    <SonComponent @mounted="onMounted" />
  </div>
</template>
<script>
  export default {
    methods: {
      onMounted() {
        console.log('onMounted')
      }
    }
  }
</script>

<template>
  <el-input @hook:mounted="onMounted" @hook:beforeDestroy="onBeforeDestroy" />
</template>
<script>
  export default {
    methods: {
      onMounted() {
        console.log('el-input onMounted')
      },
      onBeforeDestroy() {
        console.log('el-input onBeforeDestroy')
      }
    }
  }
</script>

<script setup>
  import {
    ref
  } from 'vue'
  const input = ref('')
  function whenMounted(params) {
    console.log('whenMounted')
    console.log(params)
  }
  function whenBeforeUnmount() {
    console.log('whenBeforeUnmount')
  }
  function whenUpdated() {
    console.log('whenUpdated')
  }
</script>
<template>
  <el-input v-model="input" @vue:mounted="whenMounted" @vue:beforeUnmount="whenBeforeUnmount" @vue:updated="whenUpdated" />
</template>

export default function MyButton(props, { slots }) {
  function onVnodeMounted(vnode) {
    console.log('vnode mounted', vnode)
  }
  return (
    <button onVnodeMounted={onVnodeMounted}>
      {{
        default: () => slots.default?.() ?? '按钮',
      }}
    </button>
  )
}

<ElPagination 
    onVnodeMounted={removePaginationDisabled} 
    onVnodeUpdated={removePaginationDisabled} />

<!-- Parent.vue -->
<script setup>
  import {
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated,
    ref,
  } from 'vue'
  import MyInput from './MyInput.vue'
  const myInput = ref('')
  function whenBeforeMount() {
    console.log('Son vue:beforeMount')
  }
  function whenMounted() {
    console.log('Son vue:mounted')
  }
  function whenBeforeUpdate() {
    console.log('Son vue:beforeUpdate')
  }
  function whenUpdated(vNode) {
    console.log('Son vue:updated')
    console.log(vNode)
  }
  function whenBeforeUnmount() {
    console.log('Son vue:beforeUnmount')
  }
  function whenUnmounted() {
    console.log('Son vue:unmounted')
  }
  console.log('Parent setup')
  onBeforeMount(() => {
    console.log('Parent onBeforeMount')
  })
  onMounted(() => {
    console.log('Parent onMounted')
  })
  onBeforeUpdate(() => {
    console.log('Parent onBeforeUpdate')
  })
  onUpdated(() => {
    console.log('Parent onUpdated')
  })
  onBeforeUnmount(() => {
    console.log('Parent onBeforeUnmount')
  })
  onUnmounted(() => {
    console.log('Parent onUnmounted')
  })
</script>
<template>
  <div class="init-options">
    <p>this is p tag {{ myInput }}</p>
    <MyInput v-model="myInput" @vue:beforeMount="whenBeforeMount" @vue:mounted="whenMounted" @vue:beforeUpdate="whenBeforeUpdate" @vue:updated="whenUpdated" @vue:beforeUnmount="whenBeforeUnmount" @vue:unmounted="whenUnmounted" />
  </div>
</template>

<script setup>
  import {
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated,
    ref,
  } from 'vue'
  console.log('Son setup')
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  })
  const emits = defineEmits(['update:modelValue'])
  const input = ref(props.modelValue)
  onBeforeMount(() => {
    console.log('Son onBeforeMount')
  })
  onMounted(() => {
    console.log('Son onMounted')
  })
  onBeforeUpdate(() => {
    console.log('Son onBeforeUpdate')
  })
  onUpdated(() => {
    console.log('Son updated')
  })
  onBeforeUnmount(() => {
    console.log('Son onBeforeUnmount')
  })
  onUnmounted(() => {
    console.log('Son onUnmounted')
  })
  function onInput(e) {
    input.value = e.target.value
    emits('update:modelValue', e.target.value)
  }
</script>
<template>
  <div>
    <input :value="input" @input="onInput" />
    <p>{{ input }}</p>
  </div>
</template>

parent setup
parent onBeforeMount
parent vue:beforeMount
   son setup
   son onBeforeMount
   son vue:beforeMount
   son onMounted
   son vue:mounted
parent onMounted
# 类似两个圈，或者洋葱模型
# 父组件挂载阶段先进入后挂载

Parent onBeforeUnmount
   Son vue:beforeUnmount # ！生命周期事件先触发
   Son onBeforeUnmount
   Son onUnmounted
   Son vue:unmounted # ! 生命周期事件后触发
Parent onUnmounted
# 也类似洋葱模型

Parent onBeforeUpdate
   Son onBeforeUpdate
   Son vue:beforeUpdate
   Son updated
   Son vue:updated
Parent onUpdated
# 也类似两个圈 父组件先进入更新阶段，后更新

Vue父组件监听子组件生命周期
浅析Vue中生命周期函数的区别
浅谈一下Vue生命周期中mounted和created的区别
vue3生命周期原理与生命周期函数简单应用实例分析
Vue组件生命周期三个阶段全面总结讲解
vue2与vue3中生命周期执行顺序的区别说明
聊聊vue生命周期钩子函数有哪些,分别什么时候触发
vue的路由守卫和keep-alive后生命周期详解