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 异步组件
　　欢迎收藏、点赞！