组合式Api 及相关操作用法

1.概念

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

2、用法

（1）使用组合式API的语法糖 setup函数；

当使用<script setup>的时候，任何在<script setup>声明的顶层的绑定 (包括变量，函数声 明，以及 import 导入的内容) 都能在模板中直接使用;

顶层的绑定会被暴露给模板

<script setup>
const msg = "hello";
const getMsg=()=>{
return msg;
}
</script>
<template>
<div class="todoBox">
{{ msg }}
调用函数：{{getMsg() }}
</div>
</template>

(2)上面内容中书写的msg不是响应式的，如果要变成响应式的，需要ref函数进行包装，变成ref对象；

<script setup>
import { ref } from 'vue';
const todoVal = ref('');
const addTodo=()=> {
todoVal.value=''; // 更改时要使用value
}
</script>

补充：1>响应式 ref()：接受一个内部值(number|string)，返回一个响应式的、可更改的 ref 对象 ，此对 象只有一个指向其内部值的属性 .value,也就是说你可以为 .value 赋予新的值,即所有对 .value 的操作都将被追踪.

<template>
totoVal:{{ todoVal}} <!--显示时，不需要value-->
<div class="header">
<slot></slot>
<input type="text" v-model.trim="todoVal" placeholder="添加todo"
@keyup.enter="addTodo">
</div>
</template>

          2>将数组变成响应式的对象 ，可以使用 const arr = ref([]);在使用时，一定要对arr.value进行操作， 在操作时，要使用Vue 能够侦听响应式数组的变更方法，比如：shift,push,sort。清空数组时，可 以arr.value.length = 0或arr.value.splice(0),千万不能使用 arr.value=[].

const del = index => {
todoList.value.splice(index, 1);
}

（3）使用setup钩子替代beforeCreate和created函数。所有vue3中没有beforeCreate和created的钩子 函数；

（4）子组件向父组件传值，在子组件需要使用defineEmits；

const emit = defineEmits(['add']); // 将自定义的事件名放在数组中
const addTodo=()=> {
emit('add', todoVal.value); // 在传值时要使用.value
todoVal.value='';
}

（5）父组件向子组件传值，在子组件中使用defineProps；

const props = defineProps(['foo'])
或
defineProps({
title: String,
likes: Number
})

（6）reactive(引用类型) 返回一个对象的响应式代理；

import { reactive } from 'vue';
const todoList = reactive([]);

补充：1>将对象变成响应式;

const obj = reactive({
todoList: []
});

          2>响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性;

const msg = ref('aaa');
const object = reactive({msg});
// 对对象的监听是深层次的
const changeMsg=()=>{
msg.value = "abc";
}
const changeObj=()=>{
object.msg = "Hellow";
}

        3>改变其中的一个，另外一个也改变;

const object = reactive({msg:"aaa"});
const msg = object.msg; // 非响应式 const msg = 'aaa';
const msg1 = ref(object.msg); // msg1是响应式，和Object没有关系
// 想让msg2和Object有关系，toRef(),基于响应式对象上的一个属性，创建一个对应的 ref。这样
创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
const object = reactive({msg:"aaa"});
const msg = toRef(object,'msg');
// toRefs 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性
的 ref
const {msg,age}= toRefs(object);
// 相当于
const msg = toRef(object,'msg');
const age = toRef(object,'age');

(7)watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数;

const props = defineProps({
todoList: {
type: Array,
required: true
},
flag: {
type: Boolean
}
});
watch(props.todoList,(newToToList,preToDoList)=>{
finishCount.value = newToToList.filter(item => item.done).length;
toBeDoneCount.value = newToToList.length - finishCount.value;
});

     1>深度监听：

侦听一个 getter 函数：
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变
更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时，如果回
调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。
const state = reactive({ count: 0 })
watch(
() => state,
(newValue, oldValue) => {
// newValue === oldValue
},
{ deep: true }
)
当直接侦听一个响应式对象时，侦听器会自动启用深层模式：
const state = reactive({ count: 0 })
watch(state, () => {
/* 深层级变更状态所触发的回调 */
})

      2>立即监听：

watchEffect() 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

const count = ref(0);
watchEffect(() => console.log("--",count.value));

(8)computed () 接受一个 getter 函数，返回一个只读的响应式 ref 对象;

const list = computed(()=>{
return props.todoList.filter(item => item.done === props.flag);
});

可以创建一个可读可写的ref对象;

const list = computed({
get:()=>{
return props.todoList.filter(item => item.done === props.flag);
},
set:val=>{
props.todoList=val;
}
})

(9)setup中使用provide和inject;

// 响应式
const count = ref(0);
provide('count',count);
// 静态值
let message = 0;
provide("msg",message);
let message = inject('msg'); // 静态的
const count = inject('count');// 响应式

(10)组合式API中获取路由实例和当前活跃的路由对象;

import {useRoute} from 'vue-router'
获取参数的方式:
const params = useRoute().params;
import { useRouter } from 'vue-router';
const router = useRouter()
const changeRoute = () => {
router.push({ name: 'about' });
}

(11)组合式API中将 props(路径中的参数) 传递给路由组件;

const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]