Vue3入门--组合式API

1. setup()

setup是vue3中新增的语法糖，在script标签中的写法 与钩子函数相同，也可以直接写成，setup函数在组件中的调用时机比beforecreate()钩子函数还要早，在setup()中定义的参数需要通过return 暴露出去 才能在其他组件和函数中被捕捉。

同时 由于setup被执行的时间早于beforecreate() 所以在setup中的this不再指向组件实例

<script>
export default {
	setup(){
		console.log('先打印我')
		const none = '我无法在模板中被使用'
		const view = '我可以在模板中被使用'
		return {
			view
		}
	}
	beforecreated(){
		console.log('然后是我')
	}
}
</script>
<template>
// 在vue3中  对于HTML部分 不再要求有唯一根节点 
	<div>{{ none }}</div>  // 无法显示none对应的内容
	<div>{{ view }}</div> // 显示结果---我可以在模板中被使用
</template>


// 使用setup语法糖 
<script setup>
	// 此时 none和view都可以在模板中直接被使用
	const none = '我在模板中被使用'
	const view = '我可以在模板中被使用'
</script>

2. reactive()和ref()

reactive()
作用：接受对象类型数据的参数传入，并返回一个响应式的对象

ref()
作用：接受简单类型和复杂类型数据的参数传入，并返回一个响应式的对象

<script setup>
// ref 的底层仍然依赖于 reactive
import { reactive } from 'vue'
import { ref } from 'vue'
const obj = reactive({
	key: value
})
// 类似于 obj: { key: value } 
//在模板中使用 {{ obj.key }}


const count = ref(0)
// 类似于 count: 0 并且通过v-model 用与模板上
// 在模板中访问数据要通过模板语法 {{ count }}
// 但是在script中访问count的值需要使用 count.value
console.log(count.value) // 0
</script>
<template>
	<div>{{ obj.key }}</div>
	<button @click=''></button>
</template>

3.computed

计算属性的基本思想和 Vue2的完全一致，在组合式API下，计算属性只是修改了写法

<script setup>
// 导入
	import { computed, ref } from 'vue'
	const list =ref([1,2,3,4,5,6,7,8])
	
	// 基于list派生一个计算属性，从list中滤出 >2
	// 在script中 list的形式仍然为对象类型 所以调用时需要 list.value
	const computedState = computed(() => {
		//基于响应式数据做计算之后的值
		return list.value.filter(item => item>2)
	}
</script>
<template>
	<div>原始数据:{{ list }}</div>
	<div>计算后的数据:{{ computedState }}</div>
</template>

4.watch

作用：侦听一个或多个数据的变化，数据变化时执行回调函数
两个额外参数：1.immediate //立刻执行 2.deep

<script setup>
// 导入
	import { watch, ref } from 'vue'
	const count =ref(0)
	
	//调用watch 侦听单个数据的变化
	watch(count, (newValue, oldValue) => {
		console.log(newValue, oldValue)
	}, {
		immediate: true // 保证在页面加载时就执行一次回调
		deep: true // 深度监视  同vue2
	})
	
	// 调用watch 侦听多个数据的变化
	const counts = ref(1)
	const name = ref('we are')

	watch([counts, name], (newArr, oldArr) => {
		console.log(newArr, oldArr)
	})

	// deep深度监视
	const ref1 = ref(简单类型) // 不设置deep 也依旧可以监视到数据变化
	//例如 obj  则无法监视到obj内部属性的变化  需要开启 deep: true
	const ref2 = ref(复杂类型) 


	// 不使用deep  对对象中的某一属性精确侦听
	const obj = ref({
		name: 'abc'
		age: 0
	})
	watch (() => obj.value.age, (newValue, oldValue) => {
		console.log(newValue, oldValue)
		// 此时对obj.value.age 进行修改 可以直接触发回调函数
	})
</script>

5.生命周期

在Vue3中 我们使用组合式API的钩子函数

6.父子通讯

基本思想：
1.父组件中给子组件绑定属性
2.子组件内通过props选项接收

父组件
<script setup>
	import Son from './son.vue'
	const money = ref(100)// 响应式数据绑定
	const getMoney = (money) => {
</script>
<template>
	<Son message='msg' :money='money'></Son>
</template>

子组件
<script setup>
	const props = defineProps({
		message: String,
		money: Number
	})
	console.log(props.message) // msg
</script>
<template>
	<div>{{ message }}</div>
	<div>{{ money }}</div>
</template>