Composition API详解
Composition API详解
vue3.0中新增了非常多的组合API，组合式API受到了 React Hooks 很大的启发。 由于在setup中没有this，所以数据想要响应到template中必须使用相关api的帮助，组合API都要在setup函数中去使用。
LifeCycle Hooks
在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用
import { onMounted, onUnmounted } from 'vue';
export default {
setup () {
onMounted(()=>{
//
});
onUnmounted(()=> {
//
});
}
};
生命周期2.x与Composition之间的映射关系
- beforeCreate -> use setup()
- created -> use setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
setup
理解
setup()函数是vue3中专门新增的方法，可以理解为Composition Api的入口。
执行时机
在beforecreate之后，create之前执行.
接收props数据
export default {
props: {
msg: {
type: String,
default: () => {}
}
},
setup(props) {
console.log(props);
}
}
context:
setup()的第二个参数是一个上下文对象，这个上下文对象大致包含了这些属性,注意：在setup()函数中无法访问this
const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.parent
context.root
context.emit
context.refs
}
}
reactive
reactive是用来创建一个响应式对象，等价于2.x的Vue.observable，具体可以参考下面demo。
<template>
<div>
<p @click="incment()">
click Me!
</p>
<p>
一:{{ state.count }} 二: {{ state.addCount }}
</p>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup () {
const state = reactive({//创建响应式数据
count: 0,
addCount: 0
});
function incment () {
state.count++;
state.addCount = state.count * 2;
}
return {
state,
incment
};
}
};
</script>
ref
基本语法
ref：ref也是vue3提供的实现数据响应式的方法，但是针对基本数据类型。其本质原理是reactive，将传过来的简单数据包装成一个对象，ref（xx）-> reactive({value:xx})，将值赋值在对象的value属性上，所以在js中使用ref中的值要加上.value，例如上述例子中的count2.value可以拿到值，但在template中可以直接{{count}}，不需要.value，因为3.0帮我们做了处理。
ref()函数用来给定的值创建一个响应式的数据对象,ref()的返回值是一个对象,这个对象上只包含一个.value属性.下面是基本数据类型创建步骤.
import { ref, defineComponent } from 'vue';
export default defineComponent ({
setup () {
const valueNumber = ref(0);
const valueString = ref('hello world!');
const valueBoolean = ref(true);
const valueNull = ref(null);
const valueUndefined = ref(undefined);
return {
valueNumber,
valueString,
valueBoolean,
valueNull,
valueUndefined
};
}
});
在template中访问ref创建的响应式数据
import { ref } from 'vue';
export default {
setup () {
const value = ref(1);
return {
value,
msg: 'hello world!'
};
}
};
<template>
<p>{{ value }} {{ msg }}</p>
</template>
将ref响应式数据挂载到reactive中
当把ref()创建出来值直接挂载到reactive()中时,会自动把响应式数据对象的展开为原始的值,不需要通过.value就可以直接访问到.
import { ref, reactive } from 'vue';
export default {
setup () {
const count = ref(1);
const state = reactive({
count
});
console.log(state.count);//1 可以直接访问到，不需要通过.value就可以直接访问到
state.count++;
console.log(count.value);//2 我们发现，最初count值也发生了改变
return {
count
};
}
};
新的ref会覆盖旧的ref，实例如下：
import { ref, reactive } from 'vue';
export default {
setup () {
const count = ref(1);
const state = reactive({
count
});
const newCount = ref(9);
state.count = newCount;
state.count++;
console.log(state.count, newCount, count);// 10 10 1
return {
count
};
}
};
我们发现，这次的count值却没有发生改变，还是原始值1，是因为新创建的newCount替换并覆盖了之前的count值，取代了它的位置.
ref和reactive区别：
在模板中的ref数据默认添加.value，而reactive不会
原理：在解析中会去查找是否是ref类型，通过当前数据的__v_isRef的值来判断 true/false
shallowReactive
相比于reactive，shallowReactive是非递归监听，只监听数据第一层就是proxy包装的第一层的数据，第一层数据不变后面改变没用，但如果第一层改变整体都会重新渲染。
const state = shallowReactive({
foo: 1,
nested: {
bar: 2,
},
})
// 变更 state 的自有属性是响应式的
state.foo++
// ...但不会深层代理
isReactive(state.nested) // false
state.nested.bar++ // 非响应式shallowRef
相比于ref，shallowRef监听的是第一层.value的变化。
triggerRef
监听某一层的改变做出更新。
state.value.a = "4"; triggerRef(state); //这里只有state.value.a做出更新toRaw
使传过来的数据不进行数据响应，原理是获取reactive原始数据包装成proxy，toRaw如果要获取ref的原始数据要加.value
let b= toRaw(a) b===a //true 这里改变数据不会引起UI更新markRaw
数据永远不要被追踪
a = markRaw(a);customRef
自定义ref，可以用来处理异步
function useDebouncedRef(value, delay = 200) {
let timeout
return customRef((track, trigger) => {
//这里处理接口请求
return {
get() {
// get里面不能处理请求，不然会造成死循环
track() //告诉VUE这个数据是要追踪的
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger() //告诉VUE触发UI界面更新
}, delay)
}
}
})
}
isRef
用来判断某个值是否为ref创建出来的对象，场景：当需要展开某个值可能是ref()创建出来的对象时。
import { ref, isRef } from 'vue';
export default {
setup () {
const count = ref(1);
const unwrappend = isRef(count) ? count.value : count;
return {
count,
unwrappend
};
}
};
toRefs
torefs()函数可以将reactive()创建出来的响应式对象转换为普通的对象，只不过这个对象上的每个属性节点都是ref()类型的响应式数据
<template>
<p>
<!-- 可以不通过state.value去获取每个属性 -->
{{ count }} {{ value }}
</p>
</template>
<script>
import { ref, reactive, toRefs } from 'vue';
export default {
setup () {
const state = reactive({
count: 0,
value: 'hello',
})
return {
...toRefs(state)
};
}
};
</script>
toRef
概念：为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值,更新时二者是同步的。相当于浅拷贝一个属性.
区别ref: 拷贝的是一份新的数据单独操作，更新时相互不影响，相当于深拷贝。
场景：当要将某个prop的ref传递给某个复合函数时，toRef很有用.
import { reactive, ref, toRef } from 'vue'
export default {
setup () {
const m1 = reactive({
a: 1,
b: 2
})
const m2 = toRef(m1, 'a');
const m3 = ref(m1.a);
const update = () => {
// m1.a++;//m1改变时，m2也会改变
// m2.value++; //m2改变时m1同时改变
m3.value++; //m3改变的同时，m1不会改变
}
return {
m1,
m2,
m3,
update
}
}
}
computed
computed()用来创建计算属性,返回值是一个ref的实例。
创建只读的计算属性
import { ref, computed } from 'vue';
export default {
setup () {
const count = ref(0);
const double = computed(()=> count.value + 1);//1
double++;//Error: "double" is read-only
return {
count,
double
};
}
};
创建可读可写的计算属性
在使用computed函数期间，传入一个包含get和set函数的对象，可以额得到一个可读可写的计算属性
// 创建一个 ref 响应式数据
const count = ref(1)
// 创建一个 computed 计算属性
const plusOne = computed({
// 取值函数
get: () => count.value + 1,
// 赋值函数
set: val => {
count.value = val - 1
}
})
// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8
watch
watch()函数用来监视某些数据项的变化，从而触发某些特定的操作，看下面这个案例，会实时监听count值的变化.
import { ref, watch } from 'vue';
export default {
setup () {
const count = ref(1);
watch(()=>{
console.log(count.value, 'value');
})
setInterval(()=>{
count.value++;
},1000);
return {
count,
};
}
};
监听指定的数据源
监听reactive的数据变化
import { watch, reactive } from 'vue';
export default {
setup () {
const state = reactive({
count: 0
})
watch(()=>state.count,(count, prevCount)=>{
console.log(count, prevCount);//变化后的值 变化前的值
})
setInterval(()=>{
state.count++;
}, 1000);
return {
state
};
}
};
监听ref类型的数据变化
import { ref, watch } from 'vue';
export default {
setup () {
const count = ref(0);
watch(count,(count, prevCount)=>{
console.log(count, prevCount);//变化后的值 变化前的值
})
setInterval(()=>{
count.value++;
}, 1000);
return {
count
};
}
};
监听多个指定数据变化
监听reactive类型数据变化
import { watch, reactive } from 'vue';
export default {
setup () {
const state = reactive({
count: 0,
msg: 'hello'
})
watch([()=> state.count, ()=> state.msg],([count, msg], [prevCount, prevMsg])=>{
console.log(count, msg);
console.log('---------------------');
console.log(prevCount, prevMsg);
})
setTimeout(()=>{
state.count++;
state.msg = 'hello world';
}, 1000);
return {
state
};
}
};
监听ref类型数据变化
import { ref, watch } from 'vue';
export default {
setup () {
const count = ref(0);
const msg = ref('hello');
watch([count, msg],([count, name], [prevCount, prevname])=>{
console.log(count, name);
console.log('---------------------');
console.log(prevCount, prevname);
})
setTimeout(()=>{
count.value++;
msg.value = 'hello world';
}, );
return {
count,
msg
};
}
};
清除监视
在setup()函数内创建的watch监视，会在当前组件被销毁的时候自动停止。如果想要明确的停止某个监视，可以调用watch()函数的返回值即可
// 创建监视，并得到 停止函数
const stop = watch(() => {
/* ... */
})
// 调用停止函数，清除对应的监视
stop()
清除无效的异步任务
有时候watch()监视的值发生了变化，我们期望清除无效的异步任务，此时watch回调函数中提供了cleanup registrator function来执行清除工作
- 场景
- watch被重复执行了
- watch被强制stop()
watchEffect
vue3中新增的api，用于属性监听.
与watch有什么不同？
- watchEffect不需要指定监听属性，可以自动收集依赖，只要我们回调中引用了响应式的属性，那么这些属性变更的时候，这个回调都会执行，而watch只能监听指定的属性而做出变更（v3中可以同时监听多个）
- watch可以获取到新值和旧值，而watchEffect获取不到
- watchEffect会在组件初始化的时候就会执行一次与computed同理，而收集到的依赖变化后，这个回调才会执行，而watch不需要，除非设置了指定参数。
基础用法
import { watchEffect, ref } from 'vue'
setup () {
const userID = ref(0)
watchEffect(() => console.log(userID))
setTimeout(() => {
userID.value = 1
}, 1000)
/*
* LOG
* 0
* 1
*/
return {
userID
}
}
停止监听
如果watchEffect是在setup或者生命周期里面注册的话，在取消挂在的时候会自动停止。
//停止监听
const stop = watchEffect(() => {
/* ... */
})
// later
stop()
使 side effect 无效
什么是 side effect ,不可预知的接口请求就是一个 side effect，假设我们现在用一个用户ID去查询用户的详情信息，然后我们监听了这个用户ID， 当用户ID 改变的时候我们就会去发起一次请求，这很简单，用watch 就可以做到。但是如果在请求数据的过程中，我们的用户ID发生了多次变化，那么我们就会发起多次请求，而最后一次返回的数据将会覆盖掉我们之前返回的所有用户详情。这不仅会导致资源浪费，还无法保证 watch 回调执行的顺序。而使用watchEffect我们就可以做到.
onInvalidate(fn)传入的回调会在watchEffect重新运行或者watchEffect停止的时候执行。
watchEffect(() => {
// 异步api调用，返回一个操作对象
const apiCall = someAsyncMethod(props.userID)
onInvalidate(() => {
// 取消异步api的调用。
apiCall.cancel()
})
})
shallowReactive
概念：只处理对象最外层属性的响应式(也就是浅响应式)，所以最外层属性发生改变，更新视图，其他层属性改变，视图不会更新.
场景：如果一个对象的数据结构比较深,但变化只是最外层属性.
import { shallowReactive } from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = shallowReactive(obj)
function change1() {
state.a = 7
}
function change2() {
state.first.b = 8
state.first.second.c = 9
console.log(state);
}
return { state }
}
}
shallowRef
概念：只处理了value的响应式,不进行对象的reactive处理.
场景：如果有一个对象数据，后面会产生新的对象替换.
import { shallowRef } from 'vue'
export default {
setup () {
const m1 = shallowRef({a: 1, b: {c: 2}})
const update = () => {
m1.value.a += 1
}
return {
m1,
update
}
}
}
customRef
创建一个自定义的ref,并对其依赖跟踪和更新触发进行显式控制.
场景：使用customRef实现输入框防抖
<template>
<div>
<input v-model="keyword" placeholder="搜索关键字"/>
<p>{{keyword}}</p>
</div>
</template>
<script>
import { customRef } from 'vue'
export default {
setup () {
const keyword = useDebouncedRef('', 500)
console.log(keyword)
return {
keyword
}
}
}
function useDebouncedRef(value, delay = 200) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
// 告诉Vue追踪数据
track()
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
// 告诉Vue去触发界面更新
trigger()
}, delay)
}
}
})
}
</script>
自定义Hook函数
自定义hook的作用类型于vue2中的mixin技术。
优势：清楚知道代码来源,方便复用
案例：收集用户点击的页面坐标
hook/useMousePosition.js
import { ref, onMounted, onUnmounted } from "vue";
export default function useMousePosition() {
// 初始化坐标数据
const x = ref(-1);
const y = ref(-1);
// 用于收集点击事件坐标的函数
const updatePosition = e => {
x.value = e.pageX;
y.value = e.pageY;
};
// 挂载后绑定点击监听
onMounted(() => {
document.addEventListener("click", updatePosition);
});
// 卸载前解绑点击监听
onUnmounted(() => {
document.removeEventListener("click", updatePosition);
});
return { x, y };
}
模版中使用hook函数
<template>
<div>
<p>{{ x }}</p>
<p>{{ y }}</p>
</div>
</template>
<script>
import useMousePosition from '@/hook/useMousePosition'
export default {
setup () {
const {x, y} = useMousePosition();
return {
x,
y
}
}
}
</script>
readonly与shallowReadonly
- readonly:
- 深度只读数据
- 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
- 只读代理是深层的：访问的任何嵌套 property 也是只读的。
- shallowReadonly
- 浅只读数据
- 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
- 应用场景:
- 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除
Template refs
通过ref()还可以引用页面上的元素或者组件.
元素引用
使用ref()函数创建DOM引用,需在onMounted中获取.
<template>
<div>
<p ref="dom">hello</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup () {
const dom = ref(null);
onMounted(()=> {
console.log(dom.value)//当前dom元素
});
return {
dom
}
}
};
</script>
组件引用
<template>
<div>
<Test ref="comRef"/>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import Test from "./test2";
export default {
components: { Test },
setup () {
const comRef = ref(null);
onMounted(()=> {
comRef.value.coun;//获取子组件值
comRef.value.Handle();//调用子组件函数
})
return {
comRef
}
}
};
</script>
createComponent
这个函数不是必须的，除非你想完美结合TypeScript提供的类型推断来进行项目开发
场景：这个函数仅仅提供了类型推断，能为setup()函数中的props提供完整的类型推断.
import { createComponent } from 'vue'
export default createComponent({
props: {
foo: String
},
setup(props) {
props.foo // <- type: string
}
})
getCurrentInstance
描述：可以获取当前组件的实例,然后通过ctx属性获取当前上下文，这样我们就可以在steup中使用router和vuex了.
<script>
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value) //当前路径
//与以前this获取原型上东西一样
//ctx.$parent 父组件
// ctx.$nextTick 组件更新完毕
// ctx.$store VueX
}
}
</script>
最后
在逻辑组织和逻辑复用方面，Composition API是优于Options API，因为Composition API几乎是函数，会有更好的类型推断，Composition API对 tree-shaking 友好，代码也更容易压缩，Composition API中见不到this的使用，减少了this指向不明的情况，说到这里我们对Vue3.0的Composition-Api有了一个大致的了解，可以看出composition api他更灵活，有利于写出高内聚、低耦合的代码。
腾讯云开发者
