Vue2，Vue3知识大全

Vue

1.了解vue,快速上手

• vue是一个用于构建用户的界面的渐进式框架.

• vue的两种使用方法:

1. vue核心包开发 场景:局部模块改造

2. 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

1. 作用:控制元素的显示和隐藏

2. 语法:v-show=“表达式”,表达式值true显示,false隐藏

3. 原理:切换display:none控制隐藏显示

4. 场景:频繁切换显示隐藏的场景

v-if

1. 作用:控制元素的显示和隐藏(条件渲染)

2. 语法:v-if=“表达式”,表达式值true显示,false隐藏

3. 原理:基于判断条件,是否创建或移除元素节点

4. 场景:要么显示,要么隐藏,不频繁切换的场景

v-on(可以替换为@)

1. 作用:注册事件=添加监听+提供处理逻辑

2. 语法:

• v-on:事件名=“内联语句”

• v-on:事件名=“methods中的函数名”

v-on调用传参

v-bind

1. 作用:动态设置html的标签属性->src url title….

2. 语法:v-bild:属性名=“表达式”

3. 简写: :属性名=“表达式”

v-bind对样式控制的增强

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

1. v-bind对于样式控制的增强–操作class

• 语法:class=“对象/数组”

• 对象–>键就是类名,值就是布尔值,如果值为true,有这个类,反之

<div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>

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

<div class="box" :class="[类名1,类名2,类名3]"></div>

1. v-bind对于样式控制的增强–操作style

• 语法:style=“样式对象”

<div class="box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>

v-for

1. 作用:基于数据循环,多次渲染整个元素

2. 遍历数组: v-for”(item,index) in 数组”——–item(每一项),index(下标)(可以自己命名)

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

v-key

1. 语法:key属性=“唯一标识符”

2. 作用:给列表添加的唯一标识,便于VUe进行Vue进行列表项的正确排序复用

注意:

1. key的值只能是字符串或数字类型

2. key的值必须是具有唯一性的

3. 推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)

v-model

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

• 数据变化–>视图自动更新

• 视图变化–>数据自动更新

1. 语法:v-model=‘变量’

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

• 常见的表单元素都可以用v-model绑定关联–>快速获取或设置表单元素的值

• 它会根据控制类型自动选取正确的方法来更新元素

6.指令修饰符

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

1. 按键修饰符

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

1. v-model修饰符

• v-model.trim—->去除首尾空格

• v-model.number—>转数字

1. 事件修饰符

• @事件名.stop—>阻止冒泡

• @事件名.prevent—>阻止默认行为

7.计算属性

• 基于现有的数据,计算出来的新属性,依赖的数据变化

1. 语法:

• 声明computed配置项中,一个计算属性对应一个函数

• 使用起来和普通属性一样使用(( 计算属性名 ))

计算机属性的完整写法

• 计算机默认属性的简写,只能读取访问,不能修改

• 如果要修改,需要写计算机的完整写法

8.watch监听器

• 监视数据,执行一些业务逻辑或异步操作

语法:

1. 简单写法:简单数据类型,直接监听

1. 完整写法:添加额外配置项

• deep:true 对复杂类型深度监视

• immediate:true 初始化立即执行一次handler方法

9.生命周期

vue生命周期:一个vue实例从创建到销毁的整个过程

生命周期的是个阶段:1.创建2.挂载3.更新4.销毁

10.工程化开发

11.组件的三大组成部分

1. 结构:template(只有一个根元素)

2. 样式:style(全局样式(默认):影响所有局部样式:scoped下样式,只作用于当前组件)

3. 逻辑:script(el根实例独有,data是一个函数,其他配置项一致)

12.组件通信

组件通信,就是指组件与组件之间的数据传递

• 组件的数据是独立的,无法直接访问其他组件的数据

• 想用其他组件的数据->组件通信

组件关系:

1. 父子关系(props,$emit

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

props校验

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

1. 类型校验

基础写法(只有类型校验)

props:{

校验的属性名:类型

}

完整写法:

 props:{校验的属性名:{type:类型,  //Number,String,Booleanrequrie: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简化代码

1. 表单类组件封装

• 父传子:数据 应该是父组件 props传递过来的,v-model拆解绑定数据

• 子传父:监听输入,子传父传值给父组件修改

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

• 子组件中:props通过value接收,事件触发input

• 父组件中:v-model给组件直接绑定数据

14 .sync修饰符

作用:提供数据的双向绑定,可以实现子组件与父组件数据的双向绑定

特点:prop属性名,可以自己定义,非固定的value

15.ref和$refs

作用:利用ref和$refs可以用于获取dom元素,或组件实例

特点:查找范围->当前组件内(更精确温度)

1. 获取dom:

• 目标标签-添加ref属性

• 恰当时机,通过this.$refs.XXX,获取目标标签

1. 获取组件:

• 目标组件-添加ref属性

• 恰当时机,通过this.$refs.XXX,获取目标组件,就可以调用组件对象里面的方法

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

16.Vue异步更新.$nextTick

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

1. 点击编辑,显示编辑框

2. 让编辑框,立刻获取焦点

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

day-05

1.自定义指令

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

1. 全局注册-语法

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

1. 局部注册-语法

 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.插槽

插槽-默认插槽

作用:让组件内部的一些结构支持自定义

插槽基本语法:

1. 组件内需要的定制的结构部分,改用<slot></slot>占位

2. 使用组件时,<MyDialog></MyDialog>(引入的)标签内部,传入结构替换slot

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

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

• 语法:在<slot>标签内,放置内容,作为默认显示内容

插槽-具名插槽

具名插槽语法:

1. 多个slot使用name属性名区分名字

2. template配合v-solt:名字 来分发对应标签

插槽-作用域插槽

基本使用步骤:

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

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

1. 所有添加的属性,都会被收集到一个对象中

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

1. 在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)

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

 npm add vue-router@3.6.5

1. 引入

 import VueRouter from 'vue-router'

1. 安装注册

 Vue.use(VueRouter)

1. 创建路由对象

 const router=new VueRouter

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

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

2个核心项目

1. 创建需要的组件(views目录),配置路由规则

eg:

1. 配置导航,配置路由出口(路径匹配的组件显示的位置)

2.路由的封装抽离

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

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

• 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需要#

• 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

高亮：

router-link-active 模糊匹配（用的多）

router-link-exavt-active 精准匹配

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

1.查询参数传参

1. 语法格式如下：

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

1. 对用页面组件接收传递过来的值

• $route.query.参数名

2.动态路由传参：

1. 配置动态路由

•  const router=new VenRouter({routes:[...,{path:'/ssearch/:words',component:Search}]})

1. 配置导航链接

• to=“/path/参数值”

1. 对应页面组件接收传递过来的值

• $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代码来进行跳转

两种语法：

1. path路径跳转（简单方便）

•  this.$router.push('路由路径')eg:this.$router.push('/search')

•  this.$router.push({path:'路由路径'})eg：this.$router.push({path:'/search'})

1. name命名路由跳转（适合path路径长的场景）

•  this.$router.push({name:'路由名'}){name:'路由名'，path：'/path/XXX',component:XXX},

编程式导航-路由传参

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

1. 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.参数名

1. 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多组件数据共享环境

一、

1. 创建项目：

 vue creat vuex-demo（自定义）

1. 创建三个组件，

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

1. 代码

二、

1. 安装vuex

 npm add vuex@3

1. 新建vuex模块文件

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

1. 创建仓库

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

1. main.js导入挂载

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

1.2核心概念-state状态

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

使用数据：

1. 通过store直接访问

1. 通过辅助函数（简化）

mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中

1.3核心概念-mutations

• 明确vuex同样遵循单项数据流，组件中不能直接修改仓库的数据

•  strict：true 可以开启严格模式

  state数据的修改只能通过mutations

  1.定义mutations对象，对象中存放修改state的方法

   const store =new Vuex.store({state:{count:0},mutations:{addCount(state){state.count+=1}}})

  2.组件中提交调用mutations

   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

使用模块数据：

1. 直接通过模块名访问：

 $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 postcss-px-to-viewport@1.1.1 -D

vue3

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

使用create-vue创建项目

1. 安装Node.js

2. 创建一个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（）

作用：接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤 ：

1. 从vue包中导入reactive函数

2. 在<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()

作用：接受简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤 ：

1. 从vue包中导入ref函数

2. 在<script setup>中执行ref函数并传入初始值，并使用变量接受ref函数的返回值

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

注意点：

1. 脚本中访问数据，需要通过 .value

2. 在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下的计算属性只修改了写法

核心步骤：

1. 导入computed函数

2. 执行函数在回调参数中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

作用：侦听一个或者多个数据的变化，数据变化是执行回调函数

核心步骤：

1. 导入watch函数

2. 执行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-父子通信

父传子：

基本思想：

1. 父组件中给子组件绑定属性

2. 子组件内部通过props选项接收

    const props=defineProps({属性名：类型})

    <script setup>//父传子//1.给子组件，添加属性的方式传值//2.在子组件，通过props接收//局部组件（导入就能用）import SonCom from '@/components/son-com.vue'</script>​<div><SonCom></SonCom></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>

子传父：

步骤：

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过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编译宏指定哪些属性和方法允许访问

步骤：

1. 调用ref函数生成一个ref对象

2. 通过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=999const sayHi=()=>{console.log('打招呼')}defineExpose({count,sayHi})</script>​<tempalte><div>我只是用于测试的组件-{{count}}</div></tempalte>

8.组合式API-provide和inject

作用和场景

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

跨层传递普通数据：

1. 顶层组件通过provide函数提供数据

2. 底层组件通过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异步实现

1. 安装axios

 npm i axios

1. 导入

 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