生命周期

main.vue
<template>
  <div  @click="isShow">显隐</div>
  <componentA v-if="!flag"></componentA>
  </template>
 
  <script setup lang='ts'>
  import { ref } from 'vue'
  // 不需要注册,直接引入使用
  import componentA from './componentA.vue'
 
  let flag = ref(false)
  const isShow = () => {
    flag.value = !flag.value
  }
  </script>
 
  <style scoped lang='scss'>
 
  </style>
 
componentA
<template>
<div ref="div"></div>
<div>
  {{ str }}
</div>
<button @click="update">修改</button>
</template>

<script setup lang='ts'>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from 'vue'
// beforeCreate created 在setup语法中没有对应的生命周期,setup代替了这两个生命周期
console.log('setup');

let div = ref<HTMLDivElement>()
let str = ref('hello')
onBeforeMount(() => {
  console.log('onBeforeMount', div.value) // 创建前读取不到dom,打印出来的是null
})

onMounted(() => {
  console.log('onMounted', div.value) // 创建后能够读取dom,打印出来的是div元素
})

let update = () => {
  div.value!.innerText = '修改后'
  str.value = 'world'
}
onBeforeUpdate(() => {
  console.log('onBeforeUpdate', div.value, str.value) // 响应式修改才触发,直接修改dom不会触发,打印出来是触发前的值
})

onUpdated(() => {
  console.log('onUpdated', div.value, str.value) // 响应式修改才触发,直接修改dom不会触发,打印出来是触发前的值
})


onBeforeUnmount(() => {
  console.log('onBeforeUnmount') // 组件卸载前触发
})

onUnmounted(() => {
  console.log('onUnmounted') // 组件卸载后触发
})

onRenderTracked(() => {
  console.log('onRenderTracked') // 每次响应式get都会触发
})

onRenderTriggered(() => {
  console.log('onRenderTriggered') // 每次响应式set都会触发
})
</script>

<style scoped lang='scss'>

</style>
 
 

posted on   ChoZ  阅读(3)  评论(0编辑  收藏  举报

努力加载评论中...

导航

点击右上角即可分享
微信分享提示