Vue3/Vue2生命周期的对比

在vue3中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因此在这个函数中是不能通过this来获取实例的；同时为了命名的统一，将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted。

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

<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
} from 'vue';
export default defineComponent({
  name: 'life',
  setup() {
    let name = ref('张三');
    console.log('setup相当于created和beforeCreate');
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });
    onMounted(() => {
      console.log('onMounted');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      console.log('onUpdated');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });
    onUnmounted(() => {
      console.log('onUnmounted');
    });
    onActivated(() => {
      console.log('onActivated');
    });
    onDeactivated(() => {
      console.log('onDeactivated');
    });
    return {
      name,
    };
  },
});
</script>

Vue2获取DOM

<div ref="myName">张三</div>

  created() {
    this.$nextTick(() => {
      console.log((this as any).$refs['myName'].innerHTML);
    });
  },

这里这样写是因为ts的缘故，否则是会报错的；如果js中直接就写成：

  created() {
    this.$nextTick(() => {
      console.log(this.$refs['myName'].innerHTML);
    });
  },

Vue3获取DOM

在Vue2中我们是使用this.$refs获取一个DOM或者多个DOM，Vue3中获取DOM和Vue2有些出入的，做个简单的例子来实现一下如何获取元素的DOM:

在onMounted中获取

<template>
  <div>
    <div ref="myName">张三</div>
    <div :ref="goodsRefs">羊肉串</div>
    <div :ref="goodsRefs">啤酒</div>
    <div :ref="goodsRefs">花生</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from 'vue';
export default defineComponent({
  name: 'dom',
  setup() {
    let name = ref<any>(null);
    onMounted(()=>{
        console.log(name.value.innerHTML)
    })
    return {
      myName: name,
    };
  },
});
</script>

这里需要注意的是： 必须将ref设置一个any的泛型，这样才能使用innerHTML。 否则会出现以下的报错：

在nextTick中获取

nextTick(() => {
    console.log(name.value.innerHTML);
});

获取多个DOM

    <div :ref="goodsRefs">羊肉串</div>
    <div :ref="goodsRefs">啤酒</div>
    <div :ref="goodsRefs">花生</div>

当需要获取多个元素DOM的时候，我们直接使用一个函数来获取：

  setup() {
    let goodsRefs = (el: any) => {
      console.log(el);
    };
    return {
      goodsRefs,
    };
  },

获取到了怎么使用呢，这时候需要定义一个数组，获取到的DOM直接push到数组中即可为我们所用：

let eleGoods: any[] = [];
let goodsRefs = (el: any) => {
    eleGoods.push(el);
};

接下来继续学习Vue3的知识点~

Vue3新特性的学习（四）