vue3组件库 ant-design-vue, element-plus, vant

组合式API 常用集合 VueUse

兼容vue2

1：新变化

（1）：性能提示 首次渲染更快 diff算法更快 内存占用更少 打包体积更小

（2）：更好的支持 Ts (Typescript)

（3）：组合式API模板（Composition API ）

2：相对于vue2 取消的内容

（1）：移除了$on方法 事件总线（Event Bus）不可用

（2）：移除 过滤器 filter

（3）：移除 .sync语法 与v-model进行了合并

3：实例化vue

// vue2中import Vue form 'vue' // 引入vuenew Vue({el: '#app',render: h => h(App)
})
// vue3 中import { createApp } from 'vue'  // 按需引入 createApp 
import App from './App.vue' // 引入根组件
createApp(App).mount('#app')

4：模板 template

vue3中 不在需要强制必须有一个根元素

5：composition 组合式 与 option 选项式

vue2中使用option 选项式API

特点：易理解 上手块 书写位置固定 但代码查找比较困难

vue3中使用composition 组合式API

特点：功能相关的所有东西都放在一起 快速定位 方便维护 也可以进行逻辑拆分

对比图：

6：setup（）函数

组合式API 的入口

只有在组件初始化时执行一次

在beforeCreate钩子函数执行前执行 （组件实例创建前）

这里的this指向undefined （组件实例还没有被创建）

setup (props,context){
// 参数  
// props   是一个对象 内部包含了父组件传递过来的所有数据
// context 是一个对象 包含了attrs slots emit // 定义数据// 定义函数return {//模板中要使用的数据以及函数}// 如果data中有同名的数据 以setup中的为准
}

7:vue2 与 vue3 生命周期

8:ref() 函数

1:定义响应式数据 (任意类型)

正常情况下 定义数据 可以在 模板中使用 但不具有响应式

使用ref函数定义的数据就具有响应式

在模板中两种数据都可以直接使用 但在 setup函数中 访问通过ref定义的数据

需要在变量后加 .value

{{ name1 }}
{{ name2 }}

2:获取DOM

9:reactive () 函数

定义响应式数据 (只能定义复杂类型数据) 可以直接使用

import { reactive } form 'vue'
setup (){const abc = reactive({name:老李,age:36})return {abc}
}

10:toRefs () 函数

对响应式数据进行结构 时 使其结构后的内容也具有响应式

import { reactive,toRefs } form 'vue'
setup (){const abc = reactive({name:老李,age:36})return {...toRefs(abc)}
}

11:计算属性 computed() 函数

根据一个已有数据项生成新的数据项(具有响应式)

// 1:函数形式// 先引入computed
const a = 1
const 自定义名 = computed(()=>{ return a+1 // 返回最终的结果 })// 2:对象形式
// 先引入computed
const a = 1
const 自定义名= {// 自动执行get(){return a+1 // 返回最终得到的结果},// 当计算属性的结果被改变执行set(val){// val 是 改变后的值}
}

12:监听属性 watch() 函数

监听某一数据项的变化 执行回调

// 先引入watchwatch(参数1,回调,配置对象 )参数1:要监听的内容单一数据或复杂数据的某一项 ()=>{return 监听内容}监听复杂数据 复杂数据名监听多个数据 [数据项1,数据项2,...]
回调:监听的数据项发生变化时执行
配置对象:{}immediate:true // 组件打开时立即执行deep:true     // 开启深度监听// 立即执行监听器watchEffect（（）=>{}）

13:父子组件之间通信

与vue2用法基本相同

// 1:父传子// 父组件中
通过:名="数据项名" 发送
// 子组件中 接收 可以直接在模板中使用
props:{ 名:{type:类型 ,required:是否必须(布尔值),default:默认值 } }// 函数中使用setup(props){
//props 对象 存储了所有的父组件中传递来的值}// 2:子传父// 父组件中
 // 接收自定义事件
回调(回传的数据)=>{ }// 子组件中 emits:['自定义事件'], // 数组中事件名 防止发生告警 // The "自定义事件" event has been triggered but not declared on `emits` option.setup(props,{emit}){const 事件 = ()=>{emit('自定义事件',回传的数据)}
}

14:v-model在组件中

vue2中 只能存在一个
  
msg=val" />
vue3中 可以存在多个
  
msg=val"/>// 多个v-model
 
msg=val"/>

15:依赖注入

provide ( ) 函数 和 inject ( ) 函数

实现 祖先组件向其后代传递数据 具有响应式

// 祖先元素  传递
provide('自定义数据名',传递的数据)// 后代元素 接收
inject ('自定义数据名')

如果后代元素想要修改祖先元素传递来的数据 ,需要祖先元素在传递一个更改数据的函数 ,

后代元素通过调用这个函数操作祖先传递的数据

16:路由跳转

// 引入 useRouter
import { useRouter } from 'vue-router'setup(){// 创建路由参数const router = useRouter()// 使用router.push({})
}

17：路由参数

import {  useRoute } from 'vue-router'const route = useRoute()
// 传递时应传递对象 如果是其他值会被拆分为对象
console.log(route.query)

18：js文件中使用路由

import {router} from '@/router/路由定义文件'// 跳转 
router.push()

19：路由模式

// history 关键字
createWebHashHistory(根路径)// hash 关键字
createWebHistory(根路径)

20： props 和 emit

// 接受props
const props = defineProps({label: String,});// emit传递事件
const emit = defineEmits(['change', 'delete'])