vue3组合式api开发教程 总结

vue 数据类型大全

Vue.js 使用了几种数据绑定的方式，以下是Vue中常见的数据类型：

String（字符串）

Number（数值）

Boolean（布尔值）

Array（数组）

Object（对象）

Null（空值）

Undefined（未定义）

Symbol（符号）

执行顺序   vue2的语法

vue3 简化语法糖

reactive 可以实现变量的state.count界面时时更新数据 响应式对象

ref 使用跟修改值需要直接修改 (变量名称.value)的值否则无效

watch函数

监听谁第一个参数就是谁

侦听单个数据

侦听多个数据

立即执行 immediate 他会运行第一次就执行 变化后再处理会再执行

深度侦听 deep

默认是浅层侦听 嵌套时界面数据可以变化 当时不会输出到实际数据

例子：

 添加后才能时时修改底层数据

精确侦听对象某个属性（可以防止性能损耗 使用deep后是会进行遍历）

生命周期函数

选项式是vue2的

案例：

        1.onMounted 使用（页面完成后执行）

多次调用 执行顺序

组件值传值

 1.父传子 子组件添加 defineProps  接收的是传入的 名称：类型

加入响应式数据 需要绑定变量名称

2.子传父  通过添加 defineEmits  传递的名称要一致

模板引用  ref="变量名"   

必须保证组件挂载完毕 

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

provide（提供数据）和 inject（获取数据）  

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

静态传递

动态传递

 

底层传递数据给顶层

----------------end----------------------------