这是我参与更文挑战的第24天，活动详情查看：更文挑战

一、生命周期-vue2.0 和Vue3.0 生命周期的区别

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

要注意beforeDestroy和destroyed这两个生命周期已经废弃，代替对应的生命周期分别是beforeUnmouted和unmouted

体验setup周期，和onBeforeMount周期

<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';

export default defineComponent({
  name: '',
  setup(){
    // 相当于beforeCreated 和 created
    console.log('setUp...');
    onBeforeMount(() => {
      console.log('onBeforeMount...');
    })
     onMounted(()=>{
      console.log('onMounted...');  
    })
  },
});
</script>

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f2ffc2502554c3f9db63c19cbbb2e1b~tplv-k3u1fbpfcp-watermark.image)
<style scoped>

</style>

onBeforeUpdate当数据发生的时候执行

 {{name}}
    <button @click="name='李四'">改变名字</button>
     let name = ref('张三')
      onBeforeUpdate(()=>{
      console.log('onBeforeUpdate');
    })

onUpdated onBeforeUnmount onUnmounted 这几个生命周期一起尝试

onUpdated(()=> { // 数据更新时
      console.log('onUpdated');
    })
    onBeforeUnmount(()=>{ // 页面销毁之前
      console.log('onBeforeUnmount');
    })
    onUnmounted(()=>{ // 页面销毁
      console.log('onUnmounted..');
    })

onActivated onDeactivated 开启了keeplive缓存才会执行

需要注意的是keep-alive的写法在vue3中变成slot形式了

App.vue中
 <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  
  life.vue中
    onActivated(()=> {
      console.log('onActivated..');
    })
    onDeactivated(()=>{
      console.log('onDeactivated');
    })

二、获取Dom和nextTick

在vue2中可以使用this.$refs获取一个dom或者多个dom, 但在vue3中获取dom和vue2有些不同

Vue3中获取单个dom

setup相当于create, 此时页面还没有初始化, 因此在nextTick中获取dom

<template>
  <div>
    <div ref="name">张三</div>
  </div>
</template>

<script lang="ts">
import { defineComponent,nextTick ,ref} from 'vue';

export default defineComponent({
  name: '',
  setup() {
      let name = ref<any>('')
      nextTick(()=>{
        console.log(name.value,'dom');
        console.log(name.value.innerHTML,'内容');
      })
      return {
        name
      }
  }
});
</script>

<style scoped>

</style>

vue3中获取多个dom, 获取多个dom得用方法

<div :ref="getFruit">香蕉</div>
<div :ref="getFruit">梨子</div>
<div :ref="getFruit">菠萝</div>
    
      setup() {
      let name = ref<any>('')
      nextTick(()=>{
        console.log(name.value,'dom');
        console.log(name.value.innerHTML,'内容');
      })
      let getFruit = (e:any) =>{
        console.log(e);
      }
      return {
        name,
        getFruit
      }
  }

需要在nextTick中获取dom

let name = ref<any>('')
      let fruitArr:any[] = []
      let getFruit = (el:any) =>{
        fruitArr.push(el)
      }
       nextTick(()=>{
        console.log(name.value,'dom');
        console.log(name.value.innerHTML,'内容');
        console.log(fruitArr,'fruitArr数据..'); 
      })

在vue3中, 用vue2的方式获取dom

在setup后接着写生命周期方法就好了
 mounted () {
    console.log((this as any).$refs['name'].innerHTML,'vue2中mouted');
  }

Vue3.0--生命周期、获取dom和nextTick