vue3 Composition API 组合式api
1、Setup
(1)参数
第一个参数：props
第二个参数：context 包括：attrs、slots、emit
(2)返回值
返回一个对象{}，对象中的数据可以在template中被使用，来替代data。
(3)setup函数执行时机和注意点
① setup执行时机
beforeCreate: 组件刚刚被创建出来, 组件的data和methods还没有初始化好setup
Created : 组件刚刚被创建出来, 组件的data和methods已经初始化好
② setup注意点
- 由于在执行setup函数的时候, 还没有执行Created生命周期方法,所以在setup函数中,是无法使用data和methods。
- 由于我们不能在setup函数中使用data和methods,所以Vue为了避免我们错误的使用, 它直接将setup函数中this修改成了undefined
2、Reactive
(1)什么是reactive
- reactive是Vue3中提供的实现响应式数据的方法
- 在Vue2中响应式数据是通过defineProperty来实现的
而在Vue3中响应式数据是通过ES6的Proxy来实现的
(2)reactive注意点:
reactive可以实现数据响应式。reactive 对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型，如果我们传入一个基本数据类型，会报一个警告。
const account = reactive({username: "xhl",password: "123456"})
(3)Reactive的应用场景：
条件一: reactive应用于本地的数据
条件二: 多个数据之间是有关系/联系(聚合的数据, 组织在一起会有特定的作用)
3、Ref
(1)什么是ref
ref和reactive一样, 也是用来实现响应式数据的方法，由于reactive必须传递一个对象, 所以导致在企业开发中，如果我们只想让某个变量实现响应式的时候会非常麻烦，所以Vue3就给我们提供了ref方法, 实现对简单值的监听。
(2)ref本质
ref底层的本质其实还是reactive系统会自动根据我们给ref传入的值将它转换成
ref(xx) -> reactive({value:xx})
(3)Ref实现数据响应式,可以定义简单类型数据，也可以定义复杂类型数据。
const counter = ref(0)function increment() {counter.value++}
(4) ref注意点
- 在Vue template中使用ref的值不用通过value获取
- 在JS中使用ref的值必须通过value获取
(5)ref的应用场景: 其他的场景基本都用ref(computed)
定义本地的一些简单数据：
const message = ref("Hello World")const counter = ref(0)const name = ref("why")const age = ref(18)
定义从网络中获取的数据也是使用ref：
const musics = ref([])onMounted(() => {const serverMusics = ["海阔天空", "小苹果", "野狼"]musics.value = serverMusicsconsole.log(musics.value);})
4、ref和reactive的区别
(1) ref和reactive区别
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value
如果在template里使用的是reactive类型的数据, Vue不会自动帮我们添加.value
(2) Vue是如何决定是否需要自动添加.value的
Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,
如果是就自动添加.value, 如果不是就不自动添加.value
(3) Vue是如何判断当前的数据是否是ref类型的
通过当前数据的__v_ref来判断的
如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据
(4) 我们如何判断数据到底是ref还是reactive
通过isRef / isReactive 方法
5、Vue2和vue3响应式区别
Vue2:利用object.defineproperty实现，无法监听数组的修改和新增object属性，需使用set方法更新
Vue3:利用es6的proxy实现，可以实现数组的修改和新增object属性的监听，实现响应式。
6、Readonly
readonly返回的对象都是不允许修改的，readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）。
readonly方法会传入三个类型的参数：
- 类型一：普通对象；
- 类型二：reactive返回的对象；
- 类型三：ref的对象；
const info = reactive({name: "why",age: 18,height: 1.88})const roInfo = readonly(info)function changeRoInfoName (payload) {info.name = payload}roInfo不能被修改，但是info可以被修改
7、Reactive其它函数
◼isProxy
检查对象是否是由 reactive 或 readonly创建的 proxy。
◼ isReactive
检查对象是否是由 reactive创建的响应式代理：如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true；
◼ isReadonly
检查对象是否是由 readonly 创建的只读代理。
◼ toRaw
返回 reactive 或 readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。从Reactive 或 Ref中得到原始数据， 做一些不想被监听的事情(提升性能)。
let obj = {name:'lnj', age:18};let state = reactive(obj);let obj2 = toRaw(state);console.log(obj === obj2); // trueconsole.log(obj === state); // false// state和obj的关系:// 引用关系, state的本质是一个Proxy对象, 在这个Proxy对象中引用了obj
◼ shallowReactive
创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (深层还是原生对象)。
◼ shallowReadonly
创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。
8、toRefs、toRef
const info = reactive({name: "why",age: 18,height: 1.88})// reactive被解构后会变成普通的值, 失去响应式const { name, age } = toRefs(info) //toRefs:把对象里面的所有key全部转化成refconst height = toRef(info, "height")//toRef:把对象里面的某个key转化成ref
9、ref其它函数
◼unref
如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：如果参数是一个 ref，则返回内部值，否则返回参数本身； 这是 val = isRef(val) ? val.value : val 的语法糖函数；
◼ isRef
判断值是否是一个ref对象。
◼ shallowRef
创建一个浅层的ref对象；
◼ triggerRef
手动触发和 shallowRef 相关联的副作用
10、Computed
import { reactive, computed, ref } from 'vue'const names = reactive({firstName: "kobe",lastName: "bryant"})const fullname1 = computed(() => {return names.firstName + " " + names.lastName})const score = ref(89)const scoreLevel = computed(() => {return score.value >= 60 ? "及格": "不及格"})
11、ref获取元素和组件
我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可；
我是标题
12、生命周期钩子
beforeCreate 、created -> setup
以下生命周期都改成一个方法，在setup中使用：
beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestory-> onBeforeUnmountdestoryed-> onUnmounted
新增：
onErrorCaptured：每当事件处理程序或生命周期钩子抛出错误时，Vue 会调用该钩子。
onRenderTracked：注册一个钩子，在捕获了后代组件传递的错误时调用。
onRenderTriggered：注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
13、provide函数和inject函数
通过 provide来提供数据，provide可以传入两个参数：
name：提供的属性名称；
value：提供的属性值；
ShowInfo：
ShowInfo: {{ name }}-{{ age }}-{{ height }}
14、Watch、watchEffect
watchEffect：用于自动收集响应式数据的依赖；
watch：需要手动指定侦听的数据源。
（1）Watch：
watch需要侦听特定的数据源，并且执行其回调函数；
默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调；
import { reactive, ref, watch } from 'vue'// 1.定义数据const message = ref("Hello World")const info = reactive({name: "why",age: 18,friend: {name: "kobe"}})// 2.侦听数据的变化watch(message, (newValue, oldValue) => {console.log(newValue, oldValue)})watch(info, (newValue, oldValue) => {console.log(newValue, oldValue)console.log(newValue === oldValue)}, {immediate: true})// 3.监听reactive数据变化后, 获取普通对象watch(() => ({ ...info }), (newValue, oldValue) => {console.log(newValue, oldValue)}, {immediate: true,deep: true})
Watch可以使用数组侦听多个数据源
const message = ref("Hello World")const name=ref('naixi')watch([message,name], (newValue, oldValue) => {console.log(newValue, oldValue)})
watchEffect：只要依赖的数据发生变化，就会监听到并执行回调函数。
首先，watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖；
其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行；
如果在发生某些情况下，我们希望停止侦听，这个时候我们可以获取watchEffect的返回值函数，调用该函数即可。
import { watchEffect, ref } from 'vue'const counter = ref(0)const name = ref("why")// 1.watchEffect传入的函数默认会直接被执行// 2.在执行的过程中, 会自动的收集依赖(依赖哪些响应式的数据)const stopWatch = watchEffect(() => {console.log("-------", counter.value, name.value)// 判断counter.value > 10if (counter.value >= 10) {stopWatch() //停止监听}})
15、Teleport-封装对话框，挂载在全局dom上
this is a modal
调用：
const modalIsOpen = ref(false)const openModal = () => {modalIsOpen.value = true}const onModalClose = () => {modalIsOpen.value = false}
My Modal !!!!
16、Suspense - 异步请求
Suspense 中可以添加多个异步组件，只有default中所有内容加载完成，才会显示。
Loading !...
17、SetUp语法糖
当使用 setup语法 的时候，任何在script中声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容，包括组件) 都能在模板中直接使用。
下一篇：lua基础之协程