Vue3核心知识点

一、setup组合函数

• 定义数据、函数、生命周期、监视函数等；通过return暴露出去
• 在beforeCreate之前执行一次，this是undefined

setup(props,ctx){
    console.log('props,ctx',props,ctx)
    let person = reactive({
        name:'张三',
        age:20,
        sex:'男'
    })
    return {
        person
    }
}
1
2
3
4
5
6
7
8
9
10
11

1、setup的参数，props

• props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
• 在父组件中给子组件传递数据
• 并且接收到的数据被包装成一个代理对象，能够实现响应式

// 在父组件中传入参数
<Demo msg="你好啊" name="tom" />

// 在子组件中接收
props:['msg','name'], // 需要声明参数，否则会报警告
setup(props){
	console.log(props)
}
1
2
3
4
5
6
7
8

2、context：上下文对象

1）attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。如果用props接收了，则会出现在vm上，而attrs中没有
2）emit: 分发自定义事件的函数, 相当于 this.$emit

// 1. 在父组件中给子组件绑定一个事件
<Demo @hello="showHelloMsg">

// 2. 在子组件中触发事件并且可以传值过去
emits:['hello'], // 要声明接收到了hello事件，否则会报警告
context.emit('hello',666)
1
2
3
4
5
6

3）slots: 收到的插槽内容, 相当于this.$slots

<Demo>
	<template v-slot:qwe>
		<span>你好</span>
	</template>
</Demo>
1
2
3
4
5

二、常用API

1、ref、reactive

• ref：将单个值转成响应式对象，如：数字0、1，字符串“你好”等
• reactive：将对象转成响应式对象，如：{name:‘张三’,age:18}

let height = ref(170)
let person = reactive({
        name:'张三',
        age:20,
        sex:'男'
})
1
2
3
4
5
6

2、toRef、toRefs

• toRef：将对象中的某个属性单独转成响应式对象，并和原来的值关联
• toRefs：将对象中的所有属性单独转成响应式对象，并和原来的值关联

name:toRef(person,'name')
const p = toRefs(person)
1
2

3、watch，computed，watchEffect

• watch：监视函数，被监视的属性发生变化时调用
• watchEffect：监视被使用的属性是否发生变化
• computed：计算属性，返回被计算后的值

watch(person,(val,old)=>{
     console.log('person is changed',val,old)
})
watch(height,(val,old)=>{
     console.log('height2 is changed',val,old)
})

watchEffect(()=>{
    let name = person.name
    console.log('watchEffect 执行了',name)
})

let full = computed(()=>{
    return person.name+'-'+person.age+'-'+person.sex
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、生命周期函数

在vue3中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因此在这个函数中是不能通过this来获取实例的；同时为了命名的统一，将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted

beforeCreate（建议使用setup代替）created（建议使用setup代替）
setup
beforeMount     mounted
beforeUpdate    updated
beforeUnmount   unmounted
1
2
3
4
5

vue3新增了生命周期钩子，我们可以通过在生命周期函数前加on来访问组件的生命周期，我们可以使用以下生命周期钩子：
Composition API 形式的生命周期钩子

onBeforeMount  onMounted
onBeforeUpdate  onUpdated
onBeforeUnmount  onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered
1
2
3
4
5
6

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
	    console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
	    console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
    	console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
	    console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

三、不常用API

1、shallowRef、shallowReactive、readonly、shallowReadonly

• shallowRef：如果参数是原子类型数据，作用和ref一样；如果是对象，则对象中的数据都不是响应式，但是可以替换对象
• shallowReactive：只有对象的第一层属性是响应式，其他层次数据不是响应式
• readonly：让一个响应式数据变成只读（深只读）
• shallowReadonly：让一个响应式数据变成只读（浅只读）

2、toRaw、markRaw

• toRaw：将一个由reactive生成的响应式对象转为普通对象
• markRaw：标记一个对象，使其永远不再成为响应式对象；在往响应式对象中添加对象时使用

3、customRef

• 自定义ref，传入参数track、trigger，使得Vue追踪以及触发模板更新

4、provide、inject，祖孙组件间数据传递

// 在父组件中传入数据
provide('car',car)

//在子孙组件中读取数据
let car = inject('car')
console.log('car',car)
1
2
3
4
5
6

5、响应式数据的判断

• isRef：检查一个值是否位一个ref对象
• isReactive：检查一个对象是否是由reactive创建的响应式代理
• isReadonly：检查一个对象是否是由readonly创建的只读代理
• isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

四、新的组件

1、Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

2、Teleport

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>
1
2
3
4
5
6
7
8

3、Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

用法

• 异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
1
2

• 使用Suspense包裹组件，并配置好default 与 fallback
• default：就是组件要显示的内容
• fallback：就是组件没加载完全的“备胎”（类似于img标签的alt属性）

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13