Vue3学习笔记 —— Composition API 快速入门

一、学习预览

1. Setup
2. 响应式应用
3. 方法
4. 计算属性
5. Watch

二、创建 Vue3 项目

前提查看一下你的 Vue 版本是否是大于 4.5.0 的。不是的话就得创建vue 2 项目，然后手动升级到 vue3

项目创建有两种方式

1. 纯命令安装
2. 脚手架创建

创建步骤（命令行创建）

1. vue create vue3demo
2. 指定添加的依赖（步骤省略）
   
3. 项目创建好后，进入 src 目录，然后输入 npm run serve 运行项目
4. 当你看到如下信息时，说明你的项目启动成功了！！！
   

三、Vue3 引用和方法

对比 Vue2 中 OPTIONS API，data 和 methods 的定义如下所示

<script>
export default {
     
  data () {
     
	  return {
     
		  name: '小皮'
	  }
  },
  methods: {
     
	  
  }
}
</script>

在 Vue3 中，上述的方式依然可以使用。但是我们今天要使用 Vue3 的 Composition API 完成同样的功能

3.1 Composition API setup() 函数 的响应式引用

学习指引：

1. 在 setup 函数中定义参数
2. 在 setup 函数中定义方法
3. 在 setup 函数中定义计算属性

setup 函数

• 使用 Composition API 的入口
• 在 beforeCreate 之前调用
• 在 setup 中没有 this 关键字

ref 函数

• 返回一个 响应式引用
• name 是一个响应式对象

<template>
  <div id="app">
		<h2>姓名：{
     {
     name}}</h2>
		<h2>年龄：
			<button type="button" @click="changeAge(-1)">+</button>
			{
     {
     age}} 
			<button type="button" @click="changeAge(1)">+</button>
		</h2>
		<h2>出生年份: （插值表达式实现） {
     {
     2020 - age}}</h2>
		<h2>出生年份：（计算属性实现）
			<button type="button" @click="changeYear(-1)">-</button>
			{
     {
     year}}
			<button type="button" @click="changeYear(1)">+</button>
		</h2>
  </div>
</template>

<script>
import {
      ref , computed} from 'vue'

export default {
     
	name: 'App',
	setup () {
     
		// 使用 方法 和 对象必须使用响应是对应式的。都必须返回
		const name = ref('Hello')
		const age = ref(18)
		const year = computed({
     
			// 设置 getter 和 setter
			get: () => {
     
				return 2020 - age.value
			},
			set: val => {
     
				age.value = 2020 - val
			}
		})
		function changeAge(val) {
     
			// age 是一个响应式对象，直接 age++ 是错误的
			age.value+=val;
		}
		// 计算属性
		function changeYear(val) {
     
			year.value = year.value + val
		}
		return {
     name,age,changeAge,year, changeYear}
	}
}
</script>

<style>
</style>

3.2 Composition API setup() 函数 响应式对象

上面的代码是不是看起来很冗余，这下我们使用 响应式对象 来简化上面的代码

• 使用 reactive 将一个对象 => 响应式对象
• 使用 toRefs 将 响应式对象 => 普通对象

<template>
  <div id="app">
		<h2>姓名：{
     {
     name}}</h2>
		<h2>年龄：
			<button type="button" @click="changeAge(-1)">+</button>
			{
     {
     age}} 
			<button type="button" @click="changeAge(1)">+</button>
		</h2>
		<h2>出生年份: （插值表达式实现） {
     {
     2020 - age}}</h2>
		<h2>出生年份：（计算属性实现）
			<button type="button" @click="changeYear(-1)">-</button>
			{
     {
     year}}
			<button type="button" @click="changeYear(1)">+</button>
		</h2>
  </div>
</template>

<script>
import {
      reactive , computed, toRefs} from 'vue'

export default {
     
	name: 'App',
	setup () {
     
		const data = reactive({
     
			name: '小皮',
			age: 18,
			year: computed({
     
				// 设置 getter 和 setter
				get: () => {
     
					return 2020 - data.age
				},
				set: val => {
     
					data.age = 2020 - val
				}
			})
		})
		function changeAge(val) {
     
			data.age+=val
		}
		// 计算属性
		function changeYear(val) {
     
			data.year = data.year + val
		}
		// 直接返回 data 是一个响应式的数据，在上面需要使用 data.xxx 属性得到属性，如果需要在上面直接使用属性，可以使用该方式
		// 使用 ..toRefs() 方法将一个整体的响应式对象 变成 普通对象，然后在展开（解包）得到 单独的响应式数据
		return {
     ...toRefs(data), changeAge, changeYear}
	}
}
</script>

<style>
</style>

效果同上图

3.3 Composition API setup() 函数 参数

在父子组件传参中，会使用到如下两个参数

• props
• context

import {
      reactive , computed, toRefs, watch} from 'vue'

export default {
     
	name: 'App',

	// setup 参数
	props: {
     
		title: String
	},
	
	// context 获取插槽，属性
	setup (props, context) {
     
		const data = reactive({
     
			name: '小皮',
			age: 18,
			year: computed({
     
				// 设置 getter 和 setter
				get: () => {
     
					return 2020 - data.age
				},
				set: val => {
     
					data.age = 2020 - val
				}
			})
		})
		// 使用监听器
		watch (() => props.title, (newTitle,oldTitle) => {
     
			console.log(newTitle,oldTitle)
			context.emit('title-changed')
		})
		function changeAge(val) {
     
			data.age+=val
		}
		// 计算属性
		function changeYear(val) {
     
			// 响应式对象
			data.year = data.year + val
		}
		return {
     ...toRefs(data), changeAge, changeYear}
	}
}
</script>

四、Vue3 Composition API 使用总结

对比 vue2，我们使用一些内置的方法。Vue3 用一个更大的变化

1. Composition API 的入口在 setup() 函数中
   • reactive 响应式对象
   • ref 接收一个参数并返回响应式对象
   • …
2. 原先在 Vue2 中的 methods，watch，component、data 均写在 setup() 函数，使用之前需要自行导入
3. 回归了 function xxx 定义函数