vue3

变量声明

简单描述：
复杂数据比如数组对象之类的用reactive
基础数据比如字符串和数字布尔值用ref
只读的不想修改的数据用readonly (注意不是响应式的)
当然你要是闲麻烦，偷懒也可以全部写在一个大的对象内，就像以前的data一样了。 - -！

 

函数声明

注意点就是ref和reactive的操作区别

计算属性

 

 

监听器

 

副作用函数

简单理解：类似于监听器，内部多个变量可以同时监听，一旦有一个变了就会执行
注意：要引入这个函数才行，不然不生效。还有内部如果监听的是ref的值，要监听变量的value

 

pinia（vue3新出的和vuex一样功能的状态管理工具）

和vuex区别：使用起来更方便了，里面使用的是组合式api。不再需要想vuex一样定义state，action，mutations之类的了。

页面上使用方法：
很简单，就是引入模块，然后找个变量保存一下，然后就直接使用就完事了
【注意】直接countStore.xxx使用没问题，但是如果我们想解构出countStore里面的内容，就会破坏响应性。
解决办法：我们需要通过 storeToRefs方法包住countStore就可以解构出响应式的数据了

import { storeToRefs } from 'pinia'
const countStore = useCounterStore()
const { name, doubleCount } = storeToRefs(countStore)
 

 3，多个模块，如何选择某个模块持久化，只需要在对应模块内的defineStore函数第三个参数放一个persist参数就行了

 

 

pinia封装方法
为什么要封装呢，解决两个问题
1，目前是在main.js里面导入的pinia，封装可以让main.js少一些代码，更加简介
2，我们以后会有很多个的模块，当我们每个页面使用的时候都需要每个模块引入一次，这非常不方便。我们希望的是只引入一个文件，然后可以把多个模块都导出来。免得我们写多个路径说不定就写错了。所以这里就弄一个主入口文件，然后把这个文件到处pinia实例到main.js中注册就可以了。
 

 

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// pinia实例
const pinia = createPinia()
// 注册持久化插件
pinia.use(persist)
// 到处pinia实例
export default pinia

// 这种写法意思就是：导出modules内的模块，相当于vue2的把vuex模块都汇总到一个总的文件入口。
// 这样就可以直接访问这一个文件拿到各个模块的内容,这个星号就代表模块内所有暴露出来的值全部导出
export * from './modules/count'
export * from './modules/counter'

main.js里面 导入 注册一下

 

然后页面上使用就可以这样导入

import {useCountStore,useCounterStore} from '@/stores'

父子组件传值

总体来说跟vue2的父子传值区别不是很大，就是换了一个接受发送方式，逻辑还是一样的。
【父组件】

 【子组件】

<template>
<div class="greetings">
<!-- 父组件传过来的值，子组件使用 -->
<h1>{{ info }}</h1>
<!-- 点击子组件按钮传值给父组件 -->
<button @click="clickChild">子组件传给父组件</button>
</div>
</template>

<script setup>
import { toRefs, defineProps,defineEmits,ref,reactive } from 'vue'
// 【子接收父级参数========================================================】
const props = defineProps({
//子组件接收父组件传递过来的值
info: String,
})

//【子传父---------------------------------------------------------】
// 使用defineEmits创建名称，接受一个数组,里面是父组件的自定义方法名
const emit=defineEmits(['clickChild'])
function clickChild(){
let param={
content:'b'
}
//传递给父组件
emit('clickChild',param)
}

// 【父获取子级的属性值=============================================】
const sex=ref('男')
const obj=reactive({
name:'小方',
age:18
})
// 通过这个方法把变量抛出去，记得要引入这个方法
defineExpose({sex, obj})
</script>

 

父子组件中传值的小技巧
比如一个场景，我们页面上有一个表格，搜索栏是组件。我们需要勾选父组件的表格，让处于子组件的搜索栏可以直接拿到这个勾选项并在子组件内使用，可以这样来实现
首先：子组件内通过defineExpose方法把自己的变量抛出去

 

然后父组件勾选的时候直接给这个子组件实例的变量赋值就可以实现父子传值！

 

 

provide和inject跨层级传递数据(不光是父子传，可以爷孙传，或者更多层级的传递数据)

 

 

 【注意】生命周期需要引入，不引入是不行的
这里再说明一点，这个生命周期函数是可以写多个的，不会冲突。
但是会按照顺序执行，也就是相同的生命周期写在上面的先执行。

 

 

获取dom方法

 

 

defineOptions（组件命名，页面配置之类的写在这里面）

因为用了setup语法糖，所以没有办法写一些平级的属性，所以要写在这个api里面就可以了。

 

路由跳转和参数获得(router)
vue3的路由和vue2的路由差别不大。但是由于vue3没有了this。
所以这里vue3新给了一个方法，如下图中的 useRouter 和 useRoute
然后其他的操作和vue2一样，只是从以前的this.$router拿路由对象，变成现在通过新方法拿到对象。