【Vue3】组合式 API

setup

• Vue3 可以有多个根节点
• setup 是一个方法，需要返回值
• 返回值：对象 / 渲染函数

注意事项

• Vue3 兼容 Vue2 的语法，但不推荐混着使用

• Vue2 中 methods，可以获取 Vue3 中 setup 的数据
• 但 setup 获取不了 Vue2 中 data 的数据

• setup 不能是一个 async 函数，后期有其他的方法解决
• setup 中的数据显示不是响应式的：即使数据被修改了，但页面的显示的数据并没有更新

执行顺序

setup 在 beforeCreate 之前执行，此时的 this 是 undefined
此时想在 setup 获取 this，可以通过事件异步获取

接收的参数

props

• props 参数：接收父组件传递过来的数据

• props 对象是响应式的，就是说，传入新的 props 时，会对其进行更新
  可以发现，在父组件中更新传递的数据后，子组件中接收的数据也会被更新
• 官方称，莫要解构 props 对象，这样的话，会使其失去响应性（但我试了还是响应式的）

setup({ sonMsg }) {
    console.log("sonMsg", sonMsg); // superman
},

context

• context 参数：一个上下文对象。有 attrs、emit、slots、expose 共 4 个属性
• attrs、slots、emit 分别等同于 $attrs、$slots 和 $emit 实例 property

attrs 属性：用于接收父组件传递给子组件的数据

如果组件没有设置 props 属性接收父组件传递的数据，则 context 的 attrs 属性会接收，反之则不接收

emit：用于设置自定义事件，实现子组件到父组件的数据传递

expose 方法：用于暴露子组件的数据给父组件

• 不能直接在父组件的 setup 方法中获取 faMsg.value.sonMsg，因为 setup 方法在 beforeCreate 之前执行，此时在 setup 方法内的 this 还是 undefined，元素也尚未挂载，所以尚未能获取 faMsg.value.sonMsg 的值

slots：用于获取插槽信息

生命周期

1. setup
2. beforeCreate、created
3. beforeMount、mounted
4. beforeUpdate、updated
5. beforeUnmount、unmounted

setup 中的钩子函数

1. setup ( 无 beforeCreate、created )
2. onBeforeMount、onMounted
3. onBeforeUpdate、onUpdated
4. onBeforeUnmount、onUnmounted

• 配置选项的生命周期 & setup 的生命周期可同时使用
• setup 的钩子函数会先执行

hooks 自定义函数

其实就是把函数封装成一个文件，在需要的地方使用，实现代码的复用
使 setup 中的逻辑代码更简洁清晰

1. 创建 hooks 文件夹
2. 在该文件夹内，创建 XXX.js 文件
3. 在文件中写入需要使用的函数并导出

import {
    onMounted,
    ref
} from "vue"

// 导出函数 modifyColor
export function modifyColor() {
    // 定义数据
    let coArr = ["pink", "paleGreen", "brown", "burlyWood"];
    let num = 0;
    let color = ref("pink");
	// 定义方法
    function changeColor() {
        num++;
        color.value = coArr[num % 4];
    }
    // 导出数据、方法
    return {
        color,
        changeColor,
    }
};

// 导出函数 winClick
export function winClick() {
    // window 绑定的事件
    function handleClick() {
        console.log("通过 onMounted 绑定的事件");
    }
    // 销毁事件
    function removeClick() {
        window.removeEventListener("click", handleClick)
    }
    // 生命周期
    onMounted(() => {
        window.addEventListener("click", handleClick)
    })
    // 导出数据
    return removeClick
}

• 如此，便可在需要的组件中导入 hooks 函数并使用啦

provide & inject

• provide 用于传递数据给后代组件：provide("数据名", 数据值)
• inject 用于接收祖先组件传递的数据：inject("数据名")

此时，不论在哪个组件修改数据，数据都会被修改成功，并渲染到页面上

• 如果想后代组件无法修改并渲染数据，可以使用 toRaw 修饰数据：

此时，后代组件无法修改并渲染接收的数据，但是数据是已经被修改了的，页面重新渲染的话，还是会显示最新数据

• 如果不允许修改数据，可以使用 readonly 修饰数据：

此时，后代组件不能修改接收的数据；但父级组件自己还是可以修改数据的。

computed

• 计算属性 computed 的简写：let 变量 = computed( () => X )

• 完整写法：变量 = computed( { get(){ return X }, set(val){ } } )

watch

基本使用

• 侦听器 watch 的简写：watch( 数据名, (oldVal, newVal) => {}[, 配置对象] )

• 监听多个数据：watch( [数据1, 数据2], (oldVal, newVal) => {}[, 配置对象] )

对于引用类型数据

• 监听通过 ref 定义的数据，默认不是深度监听，需要设置 deep: true 才会深度监听

• 监听通过 reactive 定义的数据，强制是深度监听
  此时，即使设置了 deep: false，还是会深度监听

• 不论如何监听引用类型数据，callback 的参数 oldVal、newVal 都是一样的！
  就是说，无法获取到真正的 oldVal 值

取消强制深度监听

• 可以使用懒加载技术，使 reactive 定义的数据不是强制深度监听
  格式：watch( () => 数据, (oldVal, newVal) => {}[, 配置对象] )
• 此时，就需要设置 deep: true 才会深度监听
• 但即使如此，oldVal 还是等于 newVal。就是说，还是无法获取真正的 oldVal 值

获取 oldVal 值

• 对于数组数据，我们可以使用懒加载技术配合解构赋值，以获取 oldVal 和 newVal 值
• 此时，侦听器是强制深度监听

• 对于对象数据，我们可以引入 _ 并使用懒加载技术配合 _.cloneDeep(数据)，以获取 oldVal 和 newVal 值
• 此时，侦听器是强制深度监听

watchEffect

• 接收一个回调函数 callBack
• 立即执行 callBack，同时响应式追踪 callBack 里面用到的数据，并在数据变更时重新运行该函数
• 注重的是函数过程，不需要指明监视哪个数据，默认监视 callBack 中用到的所有数据