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

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

响应式数据定义 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 = ref('hello world!');
        //其他类型举例
        const Boolean = ref(true);
        const Null = ref(null);
        const Undefined = ref(undefined);
        return {
        Number, String
        };
    }
};

组件props传值

const props = defineProps({
  msg: String,
  required: false
});

使用：
props.msg

组件之间通讯建议使用 provide、inject

• 父组件定义

provide("datas",datas);

• 子组件获取和更改

const datas = inject("datas");
//定义更改方法
const ok = ()=>{
 // 抛出事件
datas={
new:'新数据'
}
}

监听数据变化

	import { watch } from 'vue';
	export default {
		setup() {
			const Number = ref(0);
			//监听 Number
			watch(Number, (count, prevCount) => {
			console.log(count, prevCount);//变化后的值 变化前的值
			});
			return {Number};
		}
	};

路由

import {useRoute,useRouter} from ‘vue-router’

//跳转
		const router = useRouter();
         const jump = ()=>{
             router.push("/news")
         }
         
         const methods = {
             jump
         }
   //数据
         const route = useRoute();
         console.log(route)

defineExpose 可以将方法主动暴露出来

• 父组件

//通过ref
      <tree :show="show" 
      ref="treeRef">
      </tree>
// ref      
const treeRef = ref()
const handleClick = () => {
//获取ref中的子组件方法handleNodeClick()
 treeRef.value.handleNodeClick()
}

• 子组件

import { ref defineExpose } from 'vue'
const handleNodeClick = () => {
 console.log('要执行的方法')
}
defineExpose({ handleNodeClick})//将方法暴露出

`## defineEmits 获取的参数

• 父组件

<tree :show="show" 
@gatewayData="getGatewayData">
</tree>
//执行方法获取参数
const getGatewayData = (e) => {
  console.log('getGatewayData', e)
}

• 子组件

import { ref, defineEmits } from 'vue'
const emits = defineEmits(['handleNodeClick'])
const handleNodeClick = (e) => {
 emits('gatewayData', label.value)
}

getCurrentInstance 全局上下文

ctx相当于Vue2的this, //但是特别注意ctx代替this只适用于开发阶段，等你放到服务器上运行就会出错， //后来查阅资料说的得用proxy替代ctx，才能在你项目正式上线版本正常运行 let {ctx,proxy}=getCurrentInstance();
main.js

import { Toast } from 'vant';
const app=createApp(App)
app.use(store).use(router).use(VueWechatTitle).mount('#app')
//obj.config.globalProperties.$obj= ()=>{}
app.config.globalProperties.$Toast = Toast; // 自定义添加

可以在setup里使用里

 setup() {

   const internalInstance = getCurrentInstance();
   const $Toast=internalInstance.appContext.config.globalProperties.$Toast;

  }

其他：待整理。。。