一、组合式api
Vue3提供了两种组织代码逻辑的写法：
1.选项式api : 通过data、methods、watch 等配置选项组织代码逻辑（Vue2就是选项式api）
2.组合式api : 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码（Vue3的特点）
二、生命周期函数
Vue2和Vue3生命周期对比：
Vue2 |
Vue3 |
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestory | onActiveted |
| destoryed | onDeactiveted |
| activeted | onBeforeUnmount |
| deactiveted | onUnmounted |
三、Vue3常用核心语法
1.setup函数
特点：
（1）setup函数是vue的特有选项，是组合式api的入口函数
（2）从生命周期看，它在beforeCreate之前执行
（3）作为入口函数，必须要有return
（4）没有this值
注：setup 中返回的对象数据不是响应式的，需要使用ref和reactive转成响应式
代码示例：
<template>
<div>
example:setup
</div>
<div>
数量: {
{ num }} 姓名: {
{ obj.name }}
</div>
</template>
<script>
export default {
setup () {
const num = 100
const obj = { id: 1, name: '小金子' }
return { num, obj }
},
}
</script>
<style>
</style>2.setup语法糖：
作用：简化 setup 固定代码 ，让代码更简洁
使用：
（1）直接在script标签里面写setup 不用return 和 export default
（2）导入组件之后可以直接使用，不用注册
代码示例：
<template>
<div>
example:setup
</div>
<div>
数量: {
{ num }} 姓名: {
{ obj.name }}
</div>
<hr />
<!-- 使用子组件 -->
<son></son>
</template>
<script setup>
// 导入子组件
import son from './components/son.vue'
const num = 100
const obj = { id: 1, name: '小金子' }
</script>
<style>
</style>3.ref函数
作用：
（1）定义响应式数据，所有数据类型都可以使用（除复杂数据类型外，其他数据类型常用ref）
使用步骤：
1.从vue中导入ref
2.在 setup 函数中，使用 ref 函数，传入数据，返回一个响应式数据
3.使用 ref 创建的数据，js 中需要 .value来取值 ，template模板 中可省略
代码示例：
<template>
<div>example:ref</div>
<div>num:{
{ num }}</div>
<div>arr :{
{ arr }}</div>
<div>obj :{
{ obj }}</div>
<button class="btn" @click="btn">ref按钮</button>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(1)
const arr = ref([1, 2, 3, 4, 5])
const obj = ref({
id: 1, name: '李四'
})
const btn = () => {
num.value = 100
arr.value.push(10086)
obj.value.name = '张三'
}
</script>
<style>
.btn {
background-color: yellowgreen;
}
</style>
（2）获取DOM元素，相当于Vue2中的自定义指令
使用步骤：
1.从vue中导入ref
2.模板中建立关联: ref="自定义属性名"
3.使用: 自定义属性名.value
代码示例：
<template>
<div ref="dom">页面</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dom = ref(null)
onMounted(() => {
console.log(dom.value, '获取DOM');
})
</script>
<style>
</style>
4.reactive函数
作用：定义复杂数据类型的响应式数据，不能定义简单数据类型
使用步骤：
1.从vue中导入 reactive
2.在 setup 函数中，使用 reactive 函数，传入复杂数据类型数据，返回一个响应式数据
3.使用 reactive 创建的数据，js 和 template 模板中都可以直接使用
代码示例：
<template>
<div>example:reactive</div>
<div>arr: {
{ arr }}</div>
<div>obj: {
{ obj }}</div>
<button @click="clickBtn" class="button">reactive按钮</button>
</template>
<script setup>
import { reactive } from 'vue';
const arr = reactive([10, 9, 8, 7, 6])
const obj = reactive({ name: '小金子', age: 18 })
const clickBtn = () => {
arr.push(100)
obj.age = 20
}
</script>
<style>
.button {
background-color: plum;
}
</style>
5.computed函数
作用：计算属性
使用步骤：
1.从vue中导入 computed
2.在 setup 函数中，使用 computed 函数，参数是一个函数，函数返回计算好的数据
3.计算好的数据在 js 中需要.value取值，template 模板中可以直接使用
代码示例：
<template>
<div>example:computed</div>
<div>求和:{
{ total }}</div>
</template>
<script setup>
import { computed, reactive } from 'vue'
const arr = reactive([1, 2, 3, 4, 5, 6])
const total = computed(() => arr.reduce((sum, item) => sum + item, 0))
console.log(total.value, '求和');
</script>
<style>
</style>
6.watch函数
作用：监听数据的变化
使用步骤：
1.从vue中导入 watch
2.在 setup 函数中，使用 watch 函数，参数有以下几种情况：
（1）监听简单数据类型，参数为：值，（newVal，oldVal）=> { } ，配置项
（2）监听复杂数据类型，参数为：值，（newVal）=> { } ，配置项
（3）监听对象中某个属性，参数为：()=>对象.属性，（newVal，oldVal）=> { } ，配置项
（4）同时监听多个数据，参数为：[数据1,数据2...]，（newVal，oldVal）=> { } ，配置项
代码示例：
（1）监听简单数据类型
<template>
<div>example:watch</div>
<div>简单数据类型num : {
{ num }}</div>
<button @click="doWatch" class="watch">watch按钮</button>
</template>
<script setup>
import { watch, ref } from 'vue'
// 1.监听简单数据类型
const num = ref(1)
const doWatch = () => {
num.value++
}
watch(num, (newVal, oldVal) => {
console.log(newVal, oldVal, '简单数据类型');
})
</script>
<style>
.watch {
background-color: yellow;
}
</style>
（2）监听复杂数据类型
<template>
<div>example:watch</div>
<div>复杂数据类型obj : {
{ obj }}</div>
<button @click="doWatch" class="watch">watch按钮</button>
</template>
<script setup>
import { watch, reactive } from 'vue'
// 2.监听复杂数据类型
const obj = reactive({ name: '小金子', age: 18 })
const doWatch = () => {
obj.name = '嘻嘻'
obj.age = 19
}
watch(obj, (newVal) => {
console.log(newVal, '复杂数据类型');
})
</script>
<style>
.watch {
background-color: yellow;
}
</style>
（3）监听对象中某个属性
<template>
<div>example:watch</div>
<div>对象中某个属性-年龄 : {
{ obj.age }}</div>
<button @click="doWatch" class="watch">watch按钮</button>
</template>
<script setup>
import { watch, reactive } from 'vue'
// 3.监听对象中某个属性的变化
const obj = reactive({ name: '小金子', age: 18 })
const doWatch = () => {
obj.age++
}
watch(() => obj.age, (newVal, oldVal) => {
console.log(newVal, oldVal, '对象中某个属性');
})
</script>
<style>
.watch {
background-color: yellow;
}
</style>
（4）同时监听多个数据
<template>
<div>example:watch</div>
<div>简单数据类型 num : {
{ num }}</div>
<div>对象中的属性-年龄 : {
{ obj.age }}</div>
<button @click="doWatch" class="watch">watch按钮</button>
</template>
<script setup>
import { watch, reactive, ref } from 'vue'
// 4.同时监听多个数据
const num = ref(1)
const obj = reactive({ name: '小金子', age: 18 })
const doWatch = () => {
num.value++
obj.age++
}
watch([num, () => obj.age], (newVal, oldVal) => {
console.log(newVal, oldVal, '同时监听多个数据');
})
</script>
<style>
.watch {
background-color: yellow;
}
</style>
7.ref操作组件-defineExpose函数
作用：使用 <script setup> 的组件是默认关闭的，组件实例使用不到顶层的数据和函数。通过defineExpose函数可以将子组件中的数据和方法暴露出去，父组件直接通过ref就能调用子组件中的数据和方法
使用步骤：
1.子组件: defineExpose({变量名,函数名,... })
2.父组件: ref名.value.xxx 直接调用
父组件 :
<script setup>
import test from './components/defineExpose.vue'
import { ref, onMounted } from 'vue'
const dom = ref(null)
onMounted(() => {
console.log(dom.value, '获取子组件的DOM');
console.log(dom.value.num, '调用子组件中的数据');
console.log(dom.value.obj, '调用子组件中的对象');
console.log(dom.value.fn, '调用子组件中的方法');
dom.value.fn()
})
</script>
<template>
<test ref="dom"></test>
</template>
<style>
</style>
子组件:
<template>
<div>example:defineExpose</div>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(10086)
const obj = ref({ id: 1, name: '小金子' })
const fn = () => {
console.log('我是子组件的函数');
}
defineExpose({ num, obj, fn })
</script>
<style>
</style>
8.父传子-defineProps函数
作用：实现父传子组件通讯
使用步骤：
1.父组件：和vue2语法一样正常传值
2.子组件：用defineProps接收
3.在js中，通过defineProps的返回值来接收使用数据，template 模板中可以直接使用
父组件：
<script setup>
import son from './components/defineProps.vue'
import { ref, reactive } from 'vue'
const num = ref(100)
const obj = reactive({ page: 1, size: 10 })
const arr = reactive([1, 2, 3, 4, 5])
</script>
<template>
<div>我是父组件</div>
<hr />
<son :newNum="num" :newObj="obj" :newArr="arr"></son>
</template>
<style scoped>
</style>
子组件：
<template>
<div>子组件-example:defineProps</div>
<div>newNum : {
{ newNum }}</div>
<div>newObj : {
{ newObj }}</div>
<div>newArr : {
{ newArr }}</div>
</template>
<script setup>
const props = defineProps({
newNum: {
type: Number
},
newObj: {
type: Object
},
newArr: {
type: Object
}
})
console.log(props.newNum);
console.log(props.newObj.page);
console.log(props.newArr[2]);
</script>
<style>
</style>
9.子传父-defineEmits函数
作用：实现子传父组件通讯
使用步骤：
1.子组件：
通过defineEmits声明事件名称,并接收返回值emit
根据条件触发emit('事件名称','传值'),进行传值
2.父组件：
模板中接收@事件名="新函数"
js中新函数可以通过参数e,接收传值
子组件：
<template>
<div>子组件---example:defineEmits</div>
<button class="defineEmits" @click="doEmits">defineEmits</button>
</template>
<script setup>
import { ref, reactive } from 'vue'
const count = ref(555)
const info = reactive({ city: '北京', name: '小红' })
const fn = () => { console.log('我是子组件的方法'); }
const emits = defineEmits(['newCount', 'newInfo', 'newFn', 'allInfo'])
const doEmits = () => {
// emits('newInfo', info)
// emits('newCount', count.value)
// emits('newFn', fn)
emits('allInfo', { count, info, fn })
}
</script>
<style>
.defineEmits {
background-color: goldenrod;
}
</style>
父组件：
<script setup>
import component from './components/defineEmits.vue'
const recept = (e) => {
console.log(e, '父组件接收');
console.log(e.count.value, '父组件接收');
console.log(e.info, '父组件接收');
e.fn()
}
</script>
<template>
<div>我是父组件</div>
<hr />
<component @allInfo="recept"></component>
</template>
<style scoped>
</style>
10.跨级组件通讯provide与inject函数
作用：通过provide和inject函数实现简单的跨级组件通讯
使用步骤：
1.祖先组件
(1)从 vue 中导出 provide 函数
(2)provide('变量名', 变量值);
2.子/孙组件
(1)从 vue 中导出 inject 函数
(2)const value = inject('变量名')
Q：如何通过provide和inject实现响应式数据传值?
1.祖先组件先传变量和函数给子/孙组件
2.子/孙组件接收函数并调用传值
3.祖先组件中的函数接收传值，并对变量重新赋值
父组件：
<script setup>
import son from './components/provide.vue'
import { ref, reactive, provide } from 'vue'
const count = ref(100)
const obj = reactive({ color: 'green', price: 20 })
const addFn = (e) => {
obj.price = e
console.log(e);
}
provide('newCount', count.value)
provide('newObj', obj)
provide('newAddFn', addFn)
</script>
<template>
<div>我是父组件</div>
<div>count {
{ count }}</div>
<div>obj.price {
{ obj.price }}</div>
<hr />
<son></son>
</template>
<style scoped>
</style>
子组件：
<template>
<div>我是子组件</div>
<hr />
<sun></sun>
</template>
<script setup>
import sun from './inject.vue'
</script>
<style>
</style>
孙组件：
<template>
<div>我是孙组件</div>
<div>newCount : {
{ newCount }}</div>
<div>newObj.price : {
{ newObj.price }}</div>
<button class="btn" @click="btn">孙按钮</button>
</template>
<script setup>
import { inject } from 'vue';
const newCount = inject('newCount')
const newObj = inject('newObj')
const newAddFn = inject('newAddFn')
console.log(newCount);
console.log(newObj);
console.log(newAddFn);
const btn = () => {
newAddFn(1000)
}
</script>
<style>
.btn {
background-color: plum;
}
</style>
11.保持响应式 toRefs函数
作用：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式
使用步骤：
1.从 vue 中导出 toRefs 函数
2.将被展开或解构的数据作为参数传入toRefs 函数
3.解构后的数据是一个变量，依然可以保持响应式，但js中需要通过.value取值，模板中不用
代码示例：
<template>
<div>example:toRefs</div>
<div>id : {
{ id }}</div>
<div>name : {
{ name }}</div>
<div>age : {
{ age }}</div>
<button @click="doClick" class="refBtn">toRefs点我</button>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
const obj = reactive({ id: 1, name: '小金子', age: 18 })
const { id, name, age } = toRefs(obj)
console.log(id.value, name.value, age.value);
const doClick = () => {
id.value = 2
name.value = '小王'
age.value = 20
}
</script>
<style>
.refBtn {
background-color: gold;
}
</style>
