vue3.0梳理之Componsition API(一)

Componsition API故名思意就是组合api,是vue3.0中的重要更新

首先来看ComponstionAPI中都有什么

• ref 和 reactive
• computed 和watch
• 新的生命周期函数
• 自定义函数–hooks函数
• Teleport - 瞬移组件的位置
• Suspense - 异步加载组件

1. ref 和 reactive

// ref写法,这里并没有什么玄机,就是简单的添加响应
const count = ref(0)

ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到

//reactive使用这里也是传入对象添加相应
const state = reactive({ count: 0 })

大致解读与ref无有什么差别,有的人会质疑两种方法是否是多余了呢,其实只是为了考虑到大家的编程风格,我个人建议使用第二种,传入对象,因为ref类型的数据有isRef属性,其实也就是在底层自动转为reactive

//像是这样
ref(18) -> reactive({value: 18})

reactive在解构后return的时候,会失效,使用oRefs包裹,可以解决

2.computed 和watch

有一点我们注意不到的地方就是vue3.0取消了渲染watch概念，取而代之的effect副作用钩子，来完成当依赖项更改而促使视图,当然watch使用与2.0无异

watch

• watch监听对象可以是reactive产生的state对象下某属性，也可以是ref属性
  ,因为与之前没有什么差别,就不做代码的示例了,简单总结一下watch

//监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
//默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
//通过配置deep为true, 来指定深度监视

• 还有watchEffect函数

 watchEffect(()=>{
    fullName3.value=user.firstName+'-'+user.lastName
 })
//不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
//默认初始时就会执行第一次, 从而可以收集需要监视的数据
//监视数据发生变化时回调

computed

vue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(模板中使用不需要，会自动展开)

3.新的生命周期函数

• beforeCreate ---->setup
• created ---->setup
• beforeMount ---->onBeforeMount
• mounted ---->onMounted
• beforeUpdate ---->onBeforeUpdate
• updated ---->onUpdated
• beforeDestory ---->onBeforeUnmount
• destoryed ---->onUnmounted

1.setup替代了beforeCreate和created,我们认为setup的执行时间在beforeCreate 和created 之间,实际上setup替代了很多的东西,令代码更加的简洁明了

2.需要注意的是生命周期函数不再是默认使用的了,需要从vue中到处后使用,在setup中加’on’关键字使用

import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, 
  onBeforeUnmount, unMounted} from 'vue'

命名重点变更:beforeDestory => beforeUnmount destroyed => unmounted

4.自定义函数–hooks函数

早在2016年年年中，Dan Abramov写了《Mixins被认为是有害的》一文，他在文中认为，在React组件中使用mixins来重用逻辑是一种反模式，主张远离mixins。 不幸的是，他提到的关于React mixins的缺点也同样适用于Vue。让我们先熟悉一下这些缺点

• 命名冲突
  ==> 一个组件包含多个相同名称时,本地选项将覆盖混合器选项
  ==> 有多个相同类型的生命周期钩子,添加到钩子数组中依次调用
• 层级问题
  ==>mixin与引用组件之间无明确的层级所属关系,简单来讲就是我可以在组件中用mixin的数据属性,实际上在混合器中也可以使用预期内的组建的数据属性,这样是有隐患问题的,实际使用中可能会有重构及修改组件中的数据属性,那修改的名称该怎么与mixin中所预期的一致,无法直接暴漏问题,只能运行中报错去寻找

hooks函数解决了弊端,明天梳理hooks及Teleport 和Suspense