VUE3里面 setup() 的常用方法一览

wanmeifengfeng

已于 2022-08-08 15:50:55 修改

阅读量5.8k

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2021-03-22 11:34:18 首次发布

本文链接：https://blog.csdn.net/wanmeifengfeng/article/details/115069254

版权

本文详细介绍了Vue3中setup()的一些常用方法，包括响应式数据定义的ref和reactive，组件props传递，组件间通信的provide和inject，监听数据变化，路由操作，defineExpose用于暴露方法，以及全局上下文的getCurrentInstance。内容简洁易懂，有助于开发者深入理解Vue3的特性。

摘要由CSDN通过智能技术生成

比较常用的方法加注视一览，我尽量写简单一点，通熟易懂，举一反三

响应式数据定义 ref、reactive

reactive 创建一个响应式对象

<template>
   {
   {
    state.count }}
</template>
<script>
import {
    reactive } from 'vue';
export default {
   
    setup () {
   
    	//创建响应式数据
        const state = reactive({
   
            count: 0,
        });
        return {
   
            state
        };
    }
};
</script>

ref 的返回值是一个对象注意使用.value属性

<template>
   {
   {
    Number }}- {
   {
    String }}
</template>
import {
    ref } from 'vue';
export default {
   
    setup () {
   
        const Number = ref(0);
        const String