Vue2，Vue3知识大全

发表于 2025-9-23 05:13:12

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

Vue

1.相识vue,快速上手

vue是一个用于构建用户的界面的渐进式框架.
vue的两种利用方法:

vue核心包开发场景:局部模块改造
vue核心包&vue插件工程化开发场景:整站开发

1.创建一个vue实例:

2.插值表达式

1.插值表达式是一种Vue的模版语法

作用:利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,Js引擎会将其计算出一个效果
语法:{{ 表达式 }}

2.注意点

利用的数据必须存在(data)
支持的是表达式,而非语句,好比:if for…..
不能在标签属性中利用{{ }}插值
我是标签

3.相应式特性

1.访问数据:实例.属性名
app.msg
2.修改数据:实例.属性名=值
app.msg=‘你好,Vue’
4.开发者工具

vue插件:极简插件官网_Chrome插件下载_Chrome欣赏器应用市肆
5.Vue指令

Vue会根据不同的[指令],针对标签实现不同的[功能]
指令:带有v- 前缀的特殊标签属
v-show

作用:控制元素的表现和隐藏
语法:v-show=“表达式”,表达式值true表现,false隐藏
原理:切换display:none控制隐藏表现
场景:频仍切换表现隐藏的场景

v-if

作用:控制元素的表现和隐藏(条件渲染)
语法:v-if=“表达式”,表达式值true表现,false隐藏
原理:基于判断条件,是否创建或移除元素节点
场景:要么表现,要么隐藏,不频仍切换的场景

v-on(可以更换为@)

作用:注册变乱=添加监听+提供处理逻辑
语法:

v-on:变乱名=“内联语句”

v-on:变乱名=“methods中的函数名”

v-on调用传参
v-bind

作用:动态设置html的标签属性->src url title….
语法:v-bild:属性名=“表达式”
简写: :属性名=“表达式”

v-bind对样式控制的加强

为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class和style行内样式进行控制

v-bind对于样式控制的加强–操纵class

语法:class=“对象/数组”
对象–>键就是类名,值就是布尔值,假如值为true,有这个类,反之

数组–>数组中的全部的类,都会添加到盒子上,本质就是一个class列表

v-bind对于样式控制的加强–操纵style

语法:style=“样式对象”

v-for

作用:基于数据循环,多次渲染整个元素
遍历数组: v-for”(item,index) in 数组”——–item(每一项),index(下标)(可以自己定名)

filter(不会改变原数组):根据条件,保留满足条件的对应项,得到一个新数组
v-key

语法:key属性=“唯一标识符”
作用:给列表添加的唯一标识,便于VUe进行Vue进行列表项的精确排序复用

注意:

key的值只能是字符串或数字范例
key的值必须是具有唯一性的
保举利用id作为key(唯一),不保举利用index作为key(会厘革,不对应)

v-model

作用:给表单元素利用,双向数据绑定,可以快速获取或设置表单元素内容

数据厘革–>视图自动更新
视图厘革–>数据自动更新

语法:v-model=‘变量’

v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联–>快速获取或设置表单元素的值
它会根据控制范例自动选取精确的方法来更新元素

6.指令修饰符

通过“.”指明一些指令后缀,不同后缀封装了不同的处理操纵–>简化代码

按键修饰符

@keyup.enter —>键盘回车监听

v-model修饰符

v-model.trim—->去除首尾空格
v-model.number—>转数字

变乱修饰符

@变乱名.stop—>制止冒泡
@变乱名.prevent—>制止默认活动

7.计算属性

基于现有的数据,计算出来的新属性,依靠的数据厘革

语法:

声明computed设置项中,一个计算属性对应一个函数
利用起来和平凡属性一样利用(( 计算属性名 ))

计算机属性的完备写法

计算机默认属性的简写,只能读取访问,不能修改
假如要修改,必要写计算机的完备写法

8.watch监听器

监视数据,实行一些业务逻辑或异步操纵

语法:

简单写法:简单数据范例,直接监听

完备写法:添加额外设置项

deep:true 对复杂范例深度监视
immediate:true 初始化立即实行一次handler方法

9.生命周期

vue生命周期:一个vue实例从创建到烧毁的整个过程
生命周期的是个阶段:1.创建2.挂载3.更新4.烧毁
10.工程化开发

11.组件的三大构成部门

布局:template(只有一个根元素)
样式:style(全局样式(默认):影响全部局部样式:scoped下样式,只作用于当前组件)
逻辑:script(el根实例独有,data是一个函数,其他设置项同等)

12.组件通讯

组件通讯,就是指组件与组件之间的数据通报

组件的数据是独立的,无法直接访问其他组件的数据
想用其他组件的数据->组件通讯

组件关系:

父子关系(props,$emit

非父子关系(provide&inject ,eventbus)

props校验

为组件的prop指定验证要求,不符合要求,控制台就会实行错误

范例校验

底子写法(只有范例校验)
props:{
校验的属性名:范例
}
完备写法:

props:{
校验的属性名:{
type:类型, //Number,String,Boolean
requrie:true, //是否必填
default:默认值, //默认值
validator(value){
//自定义校验逻辑
return 是否通过校验
}
}
}

复制代码

非父子通讯
13.v-model原理

原理:v-model本质是一个语法糖.比方应用在输入框上,就是value属性和input变乱的合写
作用:提供数据的双向绑定

数据变,视图跟着变:value
视图变,数据跟着变 @input

<input v-model="msg" type="text">
等价于
<input :v-model="msg" @input="msg=$event.target.value" type="text">

复制代码

表单类组件封装&v-model简化代码

表单类组件封装

父传子:数据应该是父组件 props通报过来的,v-model拆解绑定命据
子传父:监听输入,子传父传值给父组件修改

父组件-model简化代码,实现子组件和父组件数据双向绑定

子组件中:props通过value吸取,变乱触发input
父组件中:v-model给组件直接绑定命据

14 .sync修饰符

作用:提供数据的双向绑定,可以实现子组件与父组件数据的双向绑定
特点:prop属性名,可以自己定义,非固定的value
15.ref和$refs

作用:利用ref和$refs可以用于获取dom元素,或组件实例
特点:查找范围->当前组件内(更精确温度)

获取dom:

目标标签-添加ref属性
恰其时机,通过this.$refs.XXX,获取目标标签

获取组件:

目标组件-添加ref属性
恰其时机,通过this.$refs.XXX,获取目标组件,就可以调用组件对象内里的方法

this.$ref.baseForm.组件方法()

复制代码

16.Vue异步更新.$nextTick

需求:编辑标题,编辑框自动对焦

点击编辑,表现编辑框
让编辑框,立即获取核心

this.isShowEdit=true//显示输入框
this.$nextTick(()=>{
this.$ref.inp.fouse()
})//获取焦点

复制代码

day-05

1.自定义指令

自定义下令:自己定义的指令,可以封装一些dom操纵,扩展额外功能

全局注册-语法

Vue.directive('指令名',{
"inserted"(el){
el.fouse()
}
})

复制代码

局部注册-语法

directives:{
"指令名":{
inserted(){
el.focus()
}
}
}

复制代码

自定义指令-指令的值
需求:实现一个color指令-传入不同的颜色,给标签设置文字颜色

语法:在绑定指令时,可以通过“等号”的形似为指令绑定详细的参数

<div v-color="color">我是内容</div>

复制代码

通过binding.value可以拿到指令值,指令值修改会触发update函数

directives:{
color:{
inserted(el,binding) {
el.style.color=binding.value
},
update(el,binding){
el.style.color=binding.value
}
}
}

复制代码

自定义指令 v-loading指令封装

2.插槽

插槽-默认插槽

作用:让组件内部的一些布局支持自定义
插槽根本语法:

组件内必要的定制的布局部门,改用<slot></slot>占位
利用组件时,<MyDialog></MyDialog>(引入的)标签内部,传入布局更换slot

插槽-后备内容(默认值)

插槽后备内容:封装组件时,可以为预留的<slot>插槽提供后备内容

语法:在<slot>标签内,放置内容,作为默认表现内容

插槽-具名插槽

具名插槽语法:

多个slot利用name属性名区分名字
template共同v-solt:名字来分发对应标签

插槽-作用域插槽

根本利用步骤:

给solt标签,以添加属性的方式传值

<solt :id="item.id" msg="测试文本"></solt>

复制代码

全部添加的属性,都会被网络到一个对象中

{id:3,msg="测试文本"}

复制代码

在template中,通过“#插槽名=”obj””吸取,默认插槽为default

<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
</MyTable>

复制代码

3.单页应用步调:SpA-Single Page Application

单页面应用(SPA):所勤奋能在一个html页面实现

单页步调
多页步调

4.路由

根据路由就知道不同路径的,应该匹配渲染哪个组件

vue中的路由:路径和组件的映射关系
1.vueRouter

作用:修改所在栏路径时,切换表现匹配的组件
Vue官方的一个路由插件,是一个第三方包
官网:Vue Router

vueRouter的利用(5+2)

下载:下载VueRouter模块到当前工程,版本3.6.5

npm add [email protected]

复制代码

引入

import VueRouter from 'vue-router'

复制代码

安装注册

Vue.use(VueRouter)

复制代码

创建路由对象

const router=new VueRouter

复制代码

注入,将路由对象注入到new Vue实例中,创建关联

new Vue({
render:h=>h(App),
router
}).$mount('#app')

复制代码

2个核心项目

创建必要的组件(views目次),设置路由规则

eg:

设置导航,设置路由出口(路径匹配的组件表现的位置)

2.路由的封装抽离

目标:将路由模块抽离出来.拆分模块,利于维护。

3.router-link（代替a标签）

能跳转，设置to属性指定路径（必须）。本质还是a标签，to无必要#
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

高亮：
router-link-active 暗昧匹配（用的多）
router-link-exavt-active 精准匹配

4.声明式导航-跳转传参

1.查询参数传参

语法格式如下：

to=“/path?参数名=值”

对用页面组件吸取通报过来的值

$route.query.参数名

2.动态路由传参：

设置动态路由

1. const router=new VenRouter({
2. routes:[
3. ...,
4. {
5. path:'/ssearch/:words',
6. component:Search
7. }
8. ]
9. })
复制代码

设置导航链接

to=“/path/参数值”

对应页面组件吸取通报过来的值

$route.params.参数名

5.vue路由-重定向

阐明：重定向->匹配path后，强制跳转path路径
语法：{path：匹配路劲，redirect：重定向到的路径}
6.vue路由-404

位置：配在路由的末了
语法：path：“*”（恣意路径）-前面不匹配就掷中末了这个
7.Vue路由-模式设置

hash路由（默认）网址有＃号
history路由（常用）无#号

const router=new VueRouter({
routes,
mode:"history"
})

复制代码

5.编程式导航-根本跳转

编程式导航：用js代码来进行跳转
两种语法：

path路径跳转（简单方便）

1. this.$router.push('路由路径')
2. eg:
3. this.$router.push('/search')
复制代码
1. this.$router.push({
2. path:'路由路径'
3. })
4. eg：
5. this.$router.push({
6. path:'/search'
7. })
复制代码

name定名路由跳转（适当path路径长的场景）

1. this.$router.push({
2. name:'路由名'
3. })
4. {name:'路由名'，path：'/path/XXX',component:XXX},
复制代码

编程式导航-路由传参

两种转跳方式，对于两种传参方式都支持

path路径跳转传参（query传参）

//简写
this.$router.push('/路径/？参数名1=参数值&参数2=参数值')
//完成写法
this.$router.push({
path:'/路径'，
query:{
参数名1:'参数值1'，
参数名2:'参数值'2，
}
})
------------------------
接收：
$router.query.参数名

复制代码

path路径跳转传参（动态路由传参）

//简写
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path:'/路径/参数值'
}）
----------------------
获取参数
$router.params.参数名

复制代码

name定名路由由转跳传参（query传参）

this.$router.push（{
name：'路由名字'，
query：{
参数名1：'参数值1'
参数名2：'参数值2'
}
}
----------------------------
//接收
$router.query.参数名

复制代码

name定名路由由转跳传参（动态路由传参）

this，$router.push({
name:'路由名字'，
params:{
参数名：'参数值'，
}
})
------------------------
//接收
$router.params.参数名

复制代码

6.组件缓冲keep-alive

keep-alive是vue的内置组件，当它包装动态组件时，会缓存不活动的组件实例，而不是烧毁

三个属性：

include：组件名数组，只有匹配的组件才会缓存
exclude：组件名数组，任何匹配的组件都不会缓存
max：最多可以缓存多少组件实例

复制代码

day-06

1.自定义创建项目

步骤如下：
2.ESlint代码规范

代码规范：JavaScript Standard Style
代码错误寄义：[ESLint 规则表]
day-07

1.vuex的根本认识

vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）

1.1构建vuex多组件数据共享情况

一、

创建项目：

vue creat vuex-demo（自定义）

复制代码

创建三个组件，

-components
--son1.vue
--son2.vue
-App.vue

复制代码

代码

二、

安装vuex

npm add vuex@3

复制代码

新建vuex模块文件

新建store/index.js专门存放vuex

创建仓库

Vue.use(Vuex)创建仓库 new Vuex.Store()

main.js导入挂载

在main.js中导入挂载到Vue实例上

1.2核心概念-state状态

State提供唯一的公共数据源，全部共享的数据都要同一放到Store中的State中存储。

利用数据：

通过store直接访问

通过辅助函数（简化）

mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中
1.3核心概念-mutations

明白vuex同样遵照单项数据流，组件中不能直接修改仓库的数据
1. strict：true 可以开启严格模式
复制代码
state数据的修改只能通过mutations
1.定义mutations对象，对象中存放修改state的方法
1. const store =new Vuex.store({
2. state:{
3. count:0
4. },
5. mutations:{
6. addCount(state){
7. state.count+=1
8. }
9. }
10. })
复制代码
2.组件中提交调用mutations
1. this.$store.commit('addCounnt')
复制代码
mutations传参语法

提交mytation函数

mutations：{
....
addCount(state,n){
state.count+=n
}
}

复制代码

2.辅助函数-mapMuatations

mapMutations它是把位于mutations中的方法提取出来，映射到组件methods中

3.核心概念-actions

处理异步操纵

mutations:{
changeCount(state,newCount){
state.count=newCount
}
}
//-------------
//提供方法
actions:{
setAsynCount(contaxt,num){
setTimeout(()=>{
context.commit('changeCount',num)
},1000)
}
}
//页面中dispath调用
this.$store.dispathch('setAsyncCount',200)

复制代码

4.辅助函数-mapActions

mapAction是把位于actions中的方法提取出来，映射到组件methods中

4.核心概念-getters

从state中派生出的一些状态，这些状态是依靠state的，此时会用到getters

注意：
1.定义getters
getters函数的第一个参数是state
getters函数必须有返回值
2.访问getters
通过store访问

{{$store.getters.gilterList}}

复制代码

通过辅助函数mapGetters映射

computed:{
...mapGetters(['filterList'])
},
----------------------------
{{filterList}}

复制代码

5.核心概念-模块module

利用模块数据：

直接通过模块名访问：

$store.state.模块名.xxx

复制代码

2.通过mapState映射

默认根据级别的映射：mapState(['xxx'])
子模块的映射：mapState('模块名'，['xxx'])----需要开启命名空间

复制代码

利用getters中的数据

直接访问：$store.getters['模块名/xxx']

复制代码

2.通过mapGetters映射

默认根据级别的映射：mapGetters(['xxx'])
子模块的映射：mapGetters('模块名'，['xxx'])----需要开启命名空间

复制代码

6.vant组件库

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
npm安装：

npm i vant@latest -v2 -S

复制代码

按需导入：
7.项目中vw适配

安装：

npm i [email protected] -D

复制代码

creat-vue是Vue官方新的脚手架，底层切换成vite（下一代构建工具）

利用create-vue创建项目

安装Node.js
创建一个Vue应用

npm init vue@latest

复制代码

1.组合式API-setup

setup每次利用都要return 太贫苦了
<scipt setup>语法(不必要写return)

<script setup>
//数据
const messgae=''
//函数
const logMessage=()=>{
}
</script>

复制代码

2.组合式API-reactive和ref函数

reactive（）

作用：接受对象范例数据的参数传入并返回一个相应式的对象
核心步骤：

从vue包中导入reactive函数
在<script setup>中实行reactive函数并传入范例为对象的初始值，并利用变量接受返回值

<script setup>
//导入
import {reactive} from 'vue'
//执行函数传入参数变量接受
const state=reactive(对象类型数据)
</script>

复制代码

<script setup>
import {reactive} from 'vue';
const state=reactive({
count:100
})
const setAdd=()=>{
state.count++
}
</script>
<template>
<div>
<div>{{ state.count }}</div>
<button @click="setAdd">+1</button>
</div>
</template>

复制代码

ref()

作用：接受简单范例大概对象范例的数据传入并返回一个相应式的对象
核心步骤：

从vue包中导入ref函数
在<script setup>中实行ref函数并传入初始值，并利用变量接受ref函数的返回值

<script setup>
//导入
import {ref} from 'vue'
//执行函数传入参数变量接受
const count=ref(简单类型或者复杂类型数据)
</script>

复制代码

注意点：

脚本中访问数据，必要通过 .value
在template中，.value不必要加

<script setup>
import {ref} from 'vue'
const count=ref(0)
const setCount=()=>{
count.value++ ********
}
</script>
<template>
<div>
<div>{{count}}</div>******
<button @click="setCount">+1</button>
</div>
</template>

复制代码

3.组合式API-computed

计算属性根本思想和vue2完全同等，组合式API下的计算属性只修改了写法
核心步骤：

导入computed函数
实行函数在回调参数中return基于相应式数据做计算的值，用变量吸取

<script setup>
import {computed,ref} from 'vue'
const list=ref([1,2,3,4,5,6,7,8,9])
//基于list派生一个计算属性，从list中过滤
const computedList=computed(()=>{
return list.value.filter(item=>item>2)
})
</script>
//定义一个修改数组的方法
const addFn=()=>{
list.value.push(66)
}
<template>
<div>
<div>原始数据{{list}}</div>-----1,2,3,4,5,6,7,8,9
<div>computed计算后的数据:{{computedList}}</div>----3,4,5,6,7,8,9
<button @click="addFn">修改</button>
</div>
</template>

复制代码

4.组合是API-watch

作用：侦听一个大概多个数据的厘革，数据厘革是实行回调函数
核心步骤：

导入watch函数
实行watch函数传入要侦听的相应式数据（ref对象）和回调函数

<script setup>
import {ref,watch} from 'vue'
const count=ref(0)
const nickname=ref('张三')
const changeCount=()=>{
count.value++
}
const changenickname=()=>{
nickname.value='李四'
}
--------------------------------------------------------------------
//监听一个数据的变化
//watch(ref对象，（newvalue，oldvalue）=>{.......})
watch(count,(newValue,oldValue)=>{console.log(newValue,oldValue)
}，{
immediate:true
})
--------------------------------------------------------------------
//监听多个数据的变化
//watch([ref对象1,ref对象2]，（newvalue，oldvalue）=>{.......})
watch([count,nickname],(newValue,oldValue)=>{console.log(newValue,oldValue)
})
--------------------------------------------------------------------
</script>
<template>
<div>{{count}}</div>
<button @click="changeCount">改数字</button>
<div>{{nickname}}</div>
<button @click="changenickname">改名字</button>
</template>

复制代码

immediate

在侦听器创建时立即触发回调，相应式数据厘革之后继承实行回调
deep

深度监视，默认的watch为浅层监视
const ref1=ref(简单范例) 可以直接监视
const ref2=ref(复杂范例) 监视不到复杂范例内部数据的厘革

const userInfo=ref({
name:'zs',
age:18
})
const setUserInfo=()=>{
uesrInfo.value.age++
}
watch(userInfo,(newValue)=>{
consolg.log(newValue)
},{
deep:true
})

复制代码

精确侦听对象的某个属性

在不开启deep的条件下，侦听age厘革，只有zge厘革是才实行回调

const userInfo=ref({
name:'zs',
age:18
})
const setUserInfo=()=>{
uesrInfo.value.age++
}
//只有age变化才监听
watch(（）=>userInfo.value.age,(newValue,oldValue)=>{
console.log(newValue,oldValue)
})

复制代码

5.组合API-生命周期函数

6.组合式API-父子通讯

父传子：

根本思想：

父组件中给子组件绑定属性
子组件内部通过props选项吸取
1. const props=defineProps({
2. 属性名：类型
3. })
复制代码
1. <script setup>
2. //父传子
3. //1.给子组件，添加属性的方式传值
4. //2.在子组件，通过props接收
5. //局部组件（导入就能用）
6. import SonCom from '@/components/son-com.vue'
7. </script>
9. <div>
10. <SonCom></SonCom>
11. </div>
复制代码

App.vue
------------------------------------
<script setup>
//父传子
//1.给子组件，添加属性的方式传值
//2.在子组件，通过props接收
//局部组件（导入就能用）
import SonCom from '@/components/son-com.vue'
import {ref} from 'vue'
const money=ref(100)
const getMoney=()=>{
money.value+=10
}
</script>
<div>
<h3>
父组件-{{money}}
<button @click="getMoney"></button>
</h3>
<SonCom car="宝马车" :money=money></SonCom>
</div>
--------------------------------------------------
son-com.vue
<script setup>
const props=defineProps({
car:String,
money:Number
})
</script>
<template>
<div>
//对于props传递过来的数据，模版中可以直接使用
我是子组件-{{car}}-{{money}}
</div>
</template>

复制代码

子传父：

步骤：

父组件中给子组件标签通过@绑定变乱
子组件内部通过emit方法触达变乱

defineEmits(['事件名称'])
触发
emit('自定义事件名'，参数)

复制代码

App.vue
------------------------------------
<script setup>
//父传子
//1.给子组件，添加属性的方式传值
//2.在子组件，通过props接收
//局部组件（导入就能用）
import SonCom from '@/components/son-com.vue'
import {ref} from 'vue'
const money=ref(100)
const getMoney=()=>{
money.value+=10
}
const changeFn=(newMoney)={
money.value=newMoney
}
</script>
<div>
<h3>
父组件-{{money}}
<button @click="getMoney"></button>
</h3>
<SonCom
@changeMoney="changeFn"
car="宝马车" :money=money></SonCom>
</div>
--------------------------------------------------
son-com.vue
<script setup>
const props=defineProps({
car:String,
money:Number
})
const emit=defineEmits(['changeMoney'])
consy buy=()=>{
emit('changeMoney',5)
}
</script>
<template>
<div>
//对于props传递过来的数据，模版中可以直接使用
我是子组件-{{car}}-{{money}}
<button @click="buy">
花钱
</button>
</div>
</template>

复制代码

7.组合式API-模版引用

通过ref标识获取真实的dom对象大概组件实例对象

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

调用ref函数天生一个ref对象
通过ref标识绑定对象到标签

<script setup>
import {ref} from 'vue'
const inp=ref(null)
const clickfn=()=>{
inp.value.fouse()
}
const textRef=ref(null)
const getCom=()=>{
console.log(textRef.value.count)
textRef.value.sayHi()
}
</script>
<tempalte>
<div>
<input ref="inp" type="text">
<button @click="clickfn">
点开让输入框聚焦
</button>
</div>
<TestCom ref="textRef"></TestCom>
<button @click="getCom">
获取组件数据
</button>
</tempalte>
----------------------------------------
<script srtup>
const count=999
const sayHi=()=>{
console.log('打招呼')
}
defineExpose({
count,
sayHi
})
</script>
<tempalte>
<div>
我只是用于测试的组件-{{count}}
</div>
</tempalte>

复制代码

8.组合式API-provide和inject

作用和场景

顶层组件向恣意的底层组件通报数据和方法，实现跨层通讯组件

跨层通报平凡数据：

顶层组件通过provide函数提供数据
底层组件通过inject函数获取数据

顶层组件：

provide('key',顶层组件数据)

复制代码

底层组件：

const message=inject('key')

复制代码

---------------------------------------
父组件：
<csropt setup>
//跨层传递普通数据
provide('them-color','pink')
//跨层传递响应式数据
const count =ref(100)
provide('count',count)
setTimeout(()=>{
count.value=500
},2000)
//跨层传递函数=>给子孙后代传递可以修改数据的方法
provide('changeCount',(newCount)=>{
count.value=newCount
})
</csropt>
<template>
<div>
<h1>
我是父元素
</h1>
</div>
</template>
-------------------------------------------
子元素：
<script setup>
import {inject} from 'vue'
const themeColor=inject('theme-color')
const count =inject('count')
const changeCount=inject('changCount')
const clickFn=()=>{
changeCount(1000)
}
</script>
<template>
<div>
<h3>
底层组件
</h3>
</div>
</template>

复制代码

9.Vue3.3新特性-defineOptions

以是在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，重要是用来定义 0ptions APl的选项。可以用defineOptions 定义恣意的选项，props,emits,expose,slots 除外(由于这些可以利用 defineXXX 来做到)

<script setup>
defineOptions({
name:'Foo',
inheritAttrs:false,
//....更多自定义属性
})
</script>

复制代码

10.Vue3.3新特性-defineModel

pinia

pania是vue的最新的状态管理工具，是vuex的更换品

1.提供更加简单的API (去掉了 mutation)
2.提供符合，组合式风格的API(和 Vue3 新语法同一)
3.去掉了 modules 的概念，每一个 store 都是一个独立的模块
4.共同 TypeScript 更加友爱，提供可靠的范例推断
1.手动添加Pinia到Vue项目

1.利用Vite创建一个空的Vue3项目

npm create vue@latest

复制代码

2.按照官方文档安装pinia到项目中

1. npm install pinia

复制代码

2.//创建一个pinia实例（根store）并将其传递给应用
import {creatApp} from 'vue'
import {creatPinia} from 'pinia'
import {App} from './App.vue'
const pinia=creatPinia()
const app=creatApp(App)
app.use(pinia)
app.mount(#app)

复制代码

2.pinia根本语法

3.action异步实现

安装axios

npm i axios

复制代码

导入

import {defineStroe} from 'pinia'
import {ref} from 'vue'
import axios from 'axios'
export const useChannelStore=definneStore('channel',()=>{
//声明数据
const channelList=ref([])
//声明操作数据的方法
const getList=async ()=>{
//支持异步
const {data:{data}}=await axios.get('')
channel.List.value=data.channels
}
//声明getters相关
return {
channelList,
getList
}
})

复制代码

4.storeToStore

解构数据：

const {name,doubleCount}=storeToRefs(store)

复制代码

布局方法：直接解构

const {increment}=store

复制代码

5.pinia长期化插件

1.安装 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

复制代码

2.main.js利用

import persist from 'pinia-plugin-persistedstate'
.....
app.use(createPinia().use(persist))

复制代码

3.store仓库中，persist：true开启
pnpm

element

引入element plus

pnpm add element-plus

复制代码

看官网：Button 按钮 | Element Plus
pinia构建用户仓库和长期化

长期化：

pnpm add pinia-plugin-persistedstate -D

复制代码

Vue2，Vue3知识大全

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

涛声依旧在