【九月打卡】第1天 Vue3 + Typescript 从0到1开发通用基础组件

学习课程名称：Vue3 + Typescript 从0到1开发通用基础组件
章节名称：初识 Vue3.0： 新特性详解
讲师姓名：张轩

课程内容

1. Vue3 新特性
2. 为什么会有Vue3
3. ref妙用
4. reactive
5. Vue3响应式对象的新花样
6. Vue3生命周期
7. Vue3 watch使用
8. Vue3 模块化
9. Vue3 teleport
10. Vue3 suspense

Vue3 新特性：Composition API
vue3.0的升级有个重要的新特性就是这个Composition API(组合api)

Composition API能够使相同逻辑关注点相关的代码整合到一起，从而解决了逻辑关注点碎片化难以理解和维护的痛点，尤其是在一个大型复杂的组件中。

生命周期 vue2 to vue3

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• activated -> onActivated
• deactivated -> onDeactivated
• errorCaptured -> onErrorCaptured

vue3 added debug生命周期

• onRenderTracked
• onRenderTriggered

Vue3 监听

监听基础类型

const demo = ref('我是示例')
watch(demo, (newValue,oldValue) => {
	console.log('watch demo',newValue)
})

监听复杂类型

const demo = reactive({
	name: 'fans',
	age: 30，
	children: {
		name: 'mini fan',
		age: 2
	}
})

监听整个对象
第一个参数是直接传入要监听的对象。当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 demo.name），还是孙属性变更...，都是会触发 watch 方法的
watch(demo,(newValue,oldValue) => {
	console.log('watch demo 复杂类型', newValue)
})

监听对象中某个属性
监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。注意，此时的第一个参数是一个箭头函数。
watch(()=> demo.name,(newValue,oldValue) => {
	console.log(newValue)
})

只监听对象的子属性
只有当 demo 的子属性发生变更时才会触发 watch 方法。孙属性，曾孙属性... 发生变更都不会触发 watch 方法。也就是说，当你修改 demo.children.name 或者 demo.children.age 时是不会触发 watch 方法的。
watch(() => ({ ...demo }), (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
})

监听对象的所有属性
相当于监听整个对象（效果与上面的第一种相同）。但是实现方式与上面第一种是不一样的，这里我们可以看到，第一个参数是箭头函数，并且还多了第三个参数 { deep: true }。当加上了第三个参数 { deep: true }，那么就不仅仅是监听对象的子属性了，它还会监听 孙属性，曾孙属性 ...
watch(() => demo, (newValue, oldValue) => {
	console.log('watch 已触发', newValue)
}, { deep: true })

** Vue3 模块化**

在src目录下，新建hooks目录，将所有抽离出来的功能模块放在这个文件夹中，所有的组件都可以使用

Vue3 teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。
使用 Teleport 就可以方便的解决组件间 css 层级问题