Vue3

Vue 的组件两种不同的风格书写：选项式 API 和组合式 API。

参考链接：cn.vuejs.org/guide/intro…

组合式API

setup

setup函数在 beforeCreate函数之前自动执行
setup函数中声明的变量、函数必须在最后通过 return 以{msg, fn} 对象的形式返回出去
<script setup> 经过语法糖的封装更简单的使用组合式API，不需要 return

reactive 和 ref 函数

reactive （仅支持）传入 [ 对象类型数据 ]

// 1、导入
import { reactive } from 'vue'

// 2、执行函数 （仅支持）传入对象类型数据 变量接受
const count = reactive({ count: 0 })

ref（支持）传入 [ 简单类型 + 对象类型数据 ]

// 1、导入
import { ref } from 'vue'

// 2、执行函数 （支持）传入[简单类型 + 对象类型数据] 变量接受
const count = ref(0)
// 3、脚本区域访问修改 ref 产生的响应式对象数据 必须通过 count.value属性
// 4、模板区域 直接调用

如果不使用 reactive，ref 函数，直接声明的变量，不是响应式数据
两者都是通过函数调用的方式生成响应式数据
ref函数内部实现依赖于reactive函数

computed 计算

1、计算属性中应该有 “ 副作用 ”，例：异步请求/修改DOM

2、避免直接修改计算属性的值，计算属性应该是只读的

// 1、导入 computed 函数
import { ref, computed } from 'vue'
const list = ref([1,2,3,4,5,6,7,8])

// 2、执行函数 在回调参数中 return 基于响应式数据做计算的值, 用变量接受
const computedState = computed(()=>{
    return list.value.filter(item => item > 2)
})
// 原始响应数据 list [1,2,3,4,5,6,7,8]
// 计算属性数组 computedState [3,4,5,6,7,8]

watch 深度监听、精确监听

watch 默认机制：通过 watch 监听的 ref 对象默认是 浅层监听的，直接需改嵌套的对象属性不会触发回调执行函数，需要开启 deep 选项

// 1、导入 watch
import { ref, watch } from 'vue'
const count = ref(0)

// 2、调用 watch 侦听变化
watch(count, (newValue, oldValue) => { 
    console.log('count发生了变化，旧值为${oldValue},新值为${newValue}')
},{ immediate: true })

/**
侦听数据 count
回调函数 (newValue, oldValue) => {}
立刻执行 { immediate: true }
深度侦听 { deep: true }
**/

deep 深度侦听；immediate 立刻执行

生命周期

父子通信

ref

默认情况下在 < script setup > 语法糖下 组件内部的属性和方法是不开放 给父组件访问的，可以通过 defineExpose() 编译宏 指定哪些属性和方法允许访问

provide 和 inject

顶层组件 provide(key, 数据)、底层组件 const data = inject(key)

provide 和 inject 的作用：跨层组件通信

传递过程中保持数据相应式：第二个参数传递 ref 对象

底层修改数据：顶层组件传递函数方法，底层组件调用函数方法修改数据

参考链接：www.bilibili.com/video/BV1wu…

Tips

在使用 el-element-plus 中，获取 el-dialog 组件中其他 ref 时，需要在 el-dialog 中的@open、@opened、 @close、@closed事件中获取。

因为 el-dialog 中的内容是的 懒加载，在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个 DOM 操作或通过 ref 访问组件，可在 open 事件回调中进行。

vue3 组合式API