vue3相关

vue3官方文档：Vue3

vue3创建应用实例

creatApp(根组件)

vue3挂载全局组件、router、store

use()

简介OptionsAPI与CompositionAPI的区别

1、OptionsAPI数据、方法、计算属性等，是分散在data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改data、methods、computed，不利于项目维护

2、CompositionAPI可以使用函数的方法，更加优雅的组织代码，让相关功能的代码更加有序的组合在一起

setup概述

setup是vue3中新增的配置项，值是一个函数，组件中所有用到的组合式api全都配置在setup中

setup特点

1、setup返回的对象中的内容，可以直接在模板中使用

2、setup中访问this是undefined

3、setup函数会在beforeCreated钩子前执行

setup语法糖：在script标签中直接把setup写在标签即可

setup和optionAPI

1、setup和optionAPI是可以共存的，也就是说，在setup中可以使用this获取到data或者methods等

2、选项式API可以读取setup中的数据，setup不可以读取选项式中的数据

创建响应式数据的方法

ref、reactive

ref()

1、可以定义基本类型和引用类型的数据

2、ref创建的变量必须使用.value获取

reactive()

1、可以定义引用类型的数据

2、reactive重新分配一个对象会失去响应式

toRef(obj)、toRefs(obj,key)

作用：将一个响应式对象中的每一个属性，都转化为ref对象

区别：toRef(obj)和toRefs(obj,key)功能一样，但是toRefs(obj,key)是批量转换

计算属性computed

使用：首先在vue中先引入computed

使用方法有两种，一是接收一个函数，另外一个是接收一个对象

// 第一种方法 
// 只读
const val = compouted(() => {return a+b
})// 第二种方法
// 可读可写
const val = compouted({get: () => {},set: (valure) => {// valure是val的最新值}
})

监听属性watch

使用：首先在vue中先引入watch

作用：监视数据的变化

特点：vue3中的watch只能监视以下四种数据

1、ref定义的数据

2、reactive定义的数据

3、函数返回的数据

4、包含以上数据的数组

watch接收三个参数

参数1：需要监听的数据

参数2：处理函数

参数3：配置一个对象，是否开启深度监听或者是否是否立即监听

监视ref定义的基本数据类型

const a = ref(100)
watch(a, (new, old) => {})

监视ref定义的引用类型的数据

1、如果修改的是对象中的数据，拿到的old和new是一个对象

2、如果给ref对象重新赋值，new是新值，old是旧值

const a = ref({name: '小刘'，age: 18
})// 监听整个对象
// 需要开启深度监听
watch(a, (new, old) => {
}, {deep: true
})// 监听某个属性
watch(() => a.value.name, (new,old)=>{})

监视reactive定义的对象类型

1、reactive定义的数据不能给它重新赋上新值，可以使用assign

const a = reactive({name: '小刘'，age: 18
})// 监听整个对象
// 默认开启深度监听
watch(a, (new, old) => {
}, {deep: true
})// 监听某个属性
watch(() => a.name, (new,old)=>{})

watchEffect

定义：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更新时重新执行该函数

watch对比watchEffect

1、都能监听响应式数据

2、watch需要加上需要监听的数据

3、watchEffect不需要，vue3自动收集其依赖项

watchEffect(() => {})

标签的ref属性

作用：用于注册模板引用

1、用在普通标签上，获取的是DOM节点

2、用在组件上，获取的是组件实例对象

<div>111111</div>const domRef = ref()console.log(domRef.value)

props的使用

接收props

1、defaultProps([])，接收一个数组，返回值可以访问到接收到的props

2、限制类型，可以使用泛型defaultProps<{}>([])

3、设置props默认值使用，withDefaults(参数一是defaultProps，参数2是个对象定义默认值)

生命周期

1、和vue2的生命周期类似，在原来的生命周期钩子函数上加上on

2、去掉了初始化的两个钩子，有关代码可在setup中写

路由

声明式路由

// 路由跳转
<router-link></router-link>// to 需要跳转的路由
1、若to是字符串，可以带search参数
2、若to是对象
{path: 路由地址}
{name: 路由的命名空间}
// 若是传参数
// params参数
{path: 路由地址，params: {}
}// query参数
{path: 路由地址，query: {}
}// 组件展示
<routerView></routerView>

命名路由

编程式路由

1、引入路由相关函数

2、在app上注册路由

import {createRouter,createWebHistory} from 'vue-router'const routes = createRouter({history: createWebHistory(),list: [{path: '/z',component: ，// 子级路由children: [{// 路由地址，不需要加斜杠path: 'a'}]}]
})const app = creatAPP()
app.use(routes)

路由传参

query参数：在路由后面加问号进行拼接

param参数：需要先在路由列表中注册，然后在跳转时通过斜杠跟上参数

路由参数获取

通过useRoute(),需要从vue-router中导入

pinia

组件通信

第一种：props+emit

接收emit: defineEmits(),接收一个数组，有返回值，返回值是emit,可以触发自定义事件

// 接收
const emit = defineEmits(['haha'])// 触发
emit('haha')

第二种：v-model

如果作用在组件上

<com v-model='data'></com>// 相当于
<com :modelValue="data" @update:modelValue></com>// 所以如果使用v-model需要在子组件中接收props和事件
defineProps(['modelValue'])
defineEmites(['update:modelValue'])

第三种：$attrs

第四种：$refs和$parent

第五种：provide/inject

第六种：mitt