【无标题】Vue3 setup语法糖使用基础版

1. 新生命周期(setup)

              （1）使用生命周期必须在vue实例中引用，销毁实例变为onUnmounted，与vue2的destroy作用一致   

<script setup> import {onMounted,onUnmounted} from 'vue'

//所有的生命周期用法均为回调函数

onMounted(()=>{ console.log('我创建了'); })

// 销毁实例变为onUnmounted，与vue2的destroy作用一致

onUnmounted(()=>{ console.log('我销毁了'); }) </script>

（2）vue3在生命周期中也删除了this指向，所有的方法必须引入后使用

 import {ref} from 'vue'
  let up =ref(123)

 2.使用ref拿取DOM元素

在vue2中大家都用ref拿取dom元素对吧，那么现在在vue3中如何拿取dom元素呢？

<template>
  <div>
    <!-- 模板中无需使用.value，会被自动编译转换成真实数据 -->
    <div ref="box">{ { num }}</div>
  </div>
</template>
<script setup>
import { ref,nextTick ,onMounted} from "vue";
let num = ref(1);
// 需要拿取box这个元素，那么只需要定义一个名字为上方ref相同的名字即可
let box =ref();
// 这么拿取的话会是undefined，需要等dom渲染完成后才能拿取到，因为setup时候dom还没渲染
console.log(box.value);//undefined
nextTick(()=>{
  console.log('我是nextTIck执行');
  console.log(box.value);
})
onMounted(()=>{
  console.log('我是