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,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简化代码

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=999
 const 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