Composition API字面意思是组合API,它是为了实现基于函数的逻辑复用机制而产生的。
提供了以下函数:
1. setup
composition-api所有代码都写在里面
2. ref
定义响应式数据,即数据试图可以双向绑定,主要应用于:字符串、布尔值、数字、数组。
3. reactive
定义响应式数据,主要应用于:对象。
4. toRefs
解构响应式对象数据。
<template>
<div class="hello">
<h1>{{ msg.text }}</h1>
<button @click="getMsg">获取msg</button>
<h1>{{ title }}</h1>
<button @click="getTitle">获取title</button>
<h1>{{ name }}</h1>
</div>
</template>
<script >
import { reactive, ref, toRefs } from "vue";
export default {
name: "HelloWorld",
setup() {
// 使用需要先引入
var title = ref("我是一个标签");
var msg = reactive({
text: "张三",
});
var user = reactive({
name: "张张",
});
// 获取reactive定义的数据
var getMsg = () => {
console.log(msg.text); //张三
msg.text = "里斯";
console.log(msg.text); //里斯
};
// 获取ref定义的数据
var getTitle = () => {
console.log(title.value); //我是一个标签
title.value = "改变了";
console.log(title.value); //改变了
};
return {
title,
msg,
getMsg,
getTitle,
// ...user, 这样写,数据就不能双向绑定了
...toRefs(user), //toRefs结构,数据就可以进行双向绑定
};
},
};
</script>
<style scoped>
</style>
5.watchEffect
在相应式的跟踪其依赖项时立即运行一个函数,并在更改以后重新运行,不管是否改变都会执行一次
<template>
<div class="hello">
<h1>{{ name }}</h1>
</div>
</template>
<script >
import { reactive, toRefs, watchEffect } from "vue";
export default {
name: "HelloWorld",
setup() {
// 非响应式数据
let data = reactive({
num: 12,
});
// 改变num就会执行一次,另外不管num改不改变都会执行一次
watchEffect(() => {
console.log(data.num);
});
setInterval(() => {
data.num++;
}, 1000);
return {
...toRefs(data),
};
},
};
</script>
<style scoped>
</style>
6.watch
对比watchEffect,watch 允许我们:
- 懒执行,也就是说仅在侦听的源变更时才执行回调
- 更明确哪些状态的改变会触发侦听器重新运行
- 访问侦听状态变化前后的值
<template>
<div class="hello">
<h1>{{ name }}</h1>
</div>
</template>
<script >
import { reactive, toRefs, watch, ref } from "vue";
export default {
name: "HelloWorld",
setup() {
// 非响应式数据
let data = reactive({
num: 12,
});
let age = ref(1);
watch(age, (v, old) => {
console.log(v, old);
});
watch(
() => data.num,
(v, old) => {
console.log(v, old);
}
);
//监听多个值
watch([age,data.num], (v, old) => {
console.log(v, old);//v, old都是数组
});
setInterval(() => {
data.num++;
age.value++;
}, 1000);
return {
...toRefs(data),
age,
};
},
};
</script>
<style scoped>
</style>
7.computed
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ newTitle }}</p>
</div>
</template>
<script >
import { ref, computed } from "vue";
export default {
name: "HelloWorld",
setup() {
// 使用需要先引入
let title = ref("我是一个标签");
let newTitle = computed(() => {
return "哈哈哈," + title.value;
});
return {
title,
newTitle,
};
},
};
</script>
<style scoped>
</style>
8.readonly "深层"的只读代理
传入一个对象(可双向绑定或普通)或ref,返回一个原始对象的只读代理,不可双向绑定。
<template>
<div class="hello">
<h1>{{ name }}</h1>
<input type="text" v-model="name" />
</div>
</template>
<script >
import { reactive, readonly, toRefs } from "vue";
export default {
name: "HelloWorld",
setup() {
// 非响应式数据
let obj = reactive({
name: "张三",
age: 12,
});
// readonly 将响应式数据改成只读数据
obj = readonly(obj);
return {
...toRefs(obj),
};
},
};
</script>
<style scoped>
</style>