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 异步组件

欢迎收藏、点赞！