vue3组合式API基础小记

Vue Composition API 文档(简称 VCA)

• 如果使用vue的组合式API进行开发，需要使用到此文档
• 在setup()中是没有this的

Vue 3 文档

• 基本可以做到vue2 -> vue3 无痛切换
• 可能在main.js里面需要注意
• 挂载全局方法或程序有所改变

	// vue2.x
	Vue.prototype.$xxx = xxx
	// vue3
	app.config.globalProperties.$xxx = xxx

vue-router4 文档

• 使用方法基本无差
• 如果你在使用VCA组合式API进行编写组件，就不能延续之前的写法(如: this.$router)，就需要使用useRouter，文档

---

VCA基础使用

1. 使用全局方法:

	// main.js
	// 全局方法-消息提示
	app.config.globalProperties.$msg = (msg) => {
		console.log(msg)
		return;
	};

	// user.vue
	// 在user组件中使用全局方法
	import { getCurrentInstance, onMounted } from 'vue';
	export default {
	  setup(){
	    // getCurrentInstance 为vue暴露出来的方法
	    const { ctx } = getCurrentInstance()
	    onMounted(() => {
	      ctx.$msg('哈哈哈哈')
	    })
	
	    return {
	      
	    }
	  }
	}

其他暴露的方法，请自行查看文档

---

2. reactive 新手踩坑 (禁止解构，会丢失响应)

	// 可以赋值
	const data = reactive([])
	data.push(1)  // [1]  
	// 没有赋值成功
	let newData = [1, 2, 3]
	data = newData  // []
	data.concat(newData) // []

建议写法:

	const state = reactive({
		data: []
	})
	const newArr = [1, 2, 3]
	state.data = newArr // [1, 2, 3]

使用 toRefs() 可以进行解构，具体看文档