浅谈 vue3.2 之组合式 API

目录

组合API介绍

组合api特点

setup

ref

reactive

watch

watchEffect

comouted

生命周期

全局配置

getCurrentInstance

setup使用vuex

setup 使用路由

setup

setup(props,context)

setup语法糖

---

组合API介绍

组合api特点

通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段

• 更加直观，接近原生js
• 按需加载
• 没有this，降低了耦合性提高复用性

setup

        setup() 相当于 created 生命周期，需要 return 返回，在 模板 中使用

ref

        接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

简单来说就是用来定义 值类型响应式数据 

<template>
	<div>
		<p ref="inp">你好我是html节点</p>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		setup() {
			const count = ref(10);
			// 创建一个引用类型
			const inp = ref(null)
			return {count,inp}
		}
	}
</script>

在 setup 访问 coun t值用 count.value 来访问
可以作为 dom引用 （绑定节点）：