vue3你不知道的那些事

　　一、组合式API
　　1、setup函数：组件中所有数据、方法、钩子函数等存放的容器，返回值有两个： 在beforeCreate之前调用，没有this
　　setup函数有两参数 setup(props,context)
　　props外部传入、内部声明接受的属性，值为对象；
　　context 包含
　　1、 attrs外部传入，props未声明，相当于this.$attrs；
　　2、slots收到的插槽相当于this.$slots，
　　3、emit 函数，相当于this.$emit
　　返回对象：则对象内的属性、方法可在模板直接使用；
　　若返回渲染模板函数，我们可以自定义渲染的内容
　　例如：
　　2、ref，reactive的使用
　　3、理解vue3响应式实现原理
　　在vue2中:存在的问题及解决方案， 新增、删除数据或直接下标修改数组，页面无法更新
　　在vue3中响应式实现的原理， 解决了Vue2存在的问题
　　ref和reactive区别：
　　ref 定义基本类型数据 ，也可定义对象 、数组 类型数据，但内部会通过reactive 转换为代理对象, ref通过Object.defineProperty 的get() 、set() 实现响应式，操作数据需要.value, 模版不需要，可直接使用 reactive 只能定义对象、数组类型数据，通过Proxy 数据劫持，并通过反射对象 Reflect  修改原对象属性实现响应式，读取操作数据不需要.value
　　4、计算属性、监听
　　wacth
　　5、生命周期
　　来源：vue3官网
　　⚠️注意：vue3 提供了组合式API生命周期钩子
　　1、没有提供 beforeCreate() created()  组合API钩子，同等于  setup()  ; 2、更改了两个命名钩子 beforeUnmount() 、 unmount()  ；3、使用中需要引入
　　6、hook函数，作用封装组合式API ，组件化
　　对功能化组件进行抽离，一般以use开头命名，例如在hook下创建 useDataTime.ts // 时间戳转换 const dataTimes = (result):string => { 	const date = new Date(result); 	let y = date.getFullYear(); 	let MM = date.getMonth() + 1; 	MM = MM < 10 ? (＂0＂ + MM) : MM; 	let d = date.getDate(); 	d = d < 10 ? (＂0＂ + d) : d; 	let h = date.getHours(); 	h = h < 10 ? (＂0＂ + h) : h; 	let m = date.getMinutes(); 	m = m < 10 ? (＂0＂ + m) : m; 	let s = date.getSeconds(); 	s = s < 10 ? (＂0＂ + s) : s; 	return y + ＂-＂ + MM + ＂-＂ + d }  export default dataTimes
　　7、其他组合API
　　toRe  和 toRefs  ，把一个普通数据转换成响应式数据
　　shallowRef   和 shallowReactive  ，浅层响应式，只考虑第一层数据；
　　readonly   和 shallowreadonly   ，只读；
　　toRow   和 markRow  ,原始的数据
　　customRef  自定义响应式 /*** * *  `customRef()` 预期接收一个工厂函数作为参数，这个工厂函数接受 `track` 和 `trigger`两个函数作为参数， * 并返回一个带有 `get` 和 `set` 方法的对象。 * * 一般来说，`track()` 应该在 `get()` 方法中调用，而 `trigger()` 应该在 `set()` 中调用。然而事 * 实上，你对何时调用、是否应该调用他们有完全的控制权。 * * ***/ import { customRef } from ＂vue＂  export function useDebouncedRef(value, delay = 200) {   let timeout   return customRef((track, trigger) => {     return {       get() {         track()         return value       },       set(newValue) {         clearTimeout(timeout)         timeout = setTimeout(() => {           value = newValue           trigger()         }, delay)       }     }   }) }
　　组件中使用： 
　　组件件通讯， provide   和  inject  <------- 父组件 ------->   //父组件 provide 提供   <------- 子组件 ------->   //子组件 props 提供   <------- 后代组件 -------> //后代组件 inject 提供
　　判断是否是响应式数据， isRef()  、 isReactive()    isReadonly()    isProxy()  是否为真即可
　　Fragment虚拟跟组件、Teleport传送门组件、Suspense 异步组件
　　欢迎收藏、点赞！