vue3中的需要注意的小细节

文章为博主自己学习时的一些笔记标注，如有意见不一致，烦请评论区讨论！

1、解决setup中函数及变量暴露与同时返回渲染函数冲突，可以通过expose()函数解决，如下：

import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

2、 解决没有this + 各种api的方法

a、使用路由方法

// 在新的vue-router里面代替this的useRouter，具体使用如下：
<seript setup>
    //引入路由函数
    import { useRouter } from "vue-router";
    //使用
    const router = useRouter();
    router.push({
        path: "/"
    });
</script>

b、vue3中由于没有this所以获取不到$ref,$message，但是官网中提供了方法来获取:

<template>
    <el-form ref="rulForm">
        <el-form-item></el-form-item>
    </el-form>
</template>
<script setup>
    import { ref } from 'vue'
    const rulForm  = ref(null)
</script>

//第二种方法，也可以通过getCurrentInstance来获取
<template>
    <el-form ref="rulForm">
        <el-form-item></el-form-item>
    </el-form>
</template>

<script setup>
    import { onMounted, ref, getCurrentInstance } from 'vue'
    const {proxy} = getCurrentInstance()
    onMounted(()=>{
        console.log(proxy.$refs.rulForm);
        proxy.$message({ type: 'info', text: '测试消息' })
    })
</script>