Vue3快速上手

燕燕燕燕燕
175 阅读29分钟

Vue3快速上手

一起快速入门Vue3吧！本文是根据B站尚硅谷的视频《尚硅谷Vue2.0+Vue3.0全套教程，全网最新最强vuejs从入门到精通》 和 B站黑马的视频前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！Vue3部分形成的笔记

1.Vue3简介

2.Vue3带来了什么

image.png

更容易维护

  • 组合式 API
  • 更好的 TypeScript 支持

更快的速度

  • 重写 diff 算法
  • 模板编译优化
  • 更高效的组件初始化

更小的体积

  • 良好的 TreeShaking
  • 按需引入

更优的数据响应式

  • Proxy

1.性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

    ......

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

    ......

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API（组合API）

    • setup配置
    • ref与reactive
    • watch与watchEffect
    • provide与inject
    • ......

  2. 新的内置组件

    • Fragment
    • Teleport
    • Suspense

  3. 其他改变

    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on 的修饰符
    • ......

一、创建Vue3.0工程

0. create-vue搭建Vue3项目

1. 认识 create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite（下一代构建工具），为开发提供极速响应

image.png

2. 使用create-vue创建项目

  1. 前提环境条件

    已安装 16.0 或更高版本的 Node.js

    node -v

  2. 创建一个Vue应用

    npm init vue@latest

    这一指令将会安装并执行 create-vue

1.使用 vue-cli 创建

官方文档：cli.vuejs.org/zh/guide/cr…

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.使用 vite 创建

官方文档：v3.cn.vuejs.org/guide/insta…

vite官网：vitejs.cn

  • 什么是vite？—— 新一代前端构建工具。
  • 优势如下：
    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图

af5f8d4493f3423087d6b9e6c5e60fa1~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.awebp

c57d4d695fe64014b78610ff2a5cd2b6~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.awebp

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

3. 分析工程结构

0. 项目目录和关键文件

image.png

关键文件：

  1. vite.config.js - 项目的配置文件 基于vite的配置

  2. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite

  3. main.js - 入口文件 createApp 函数创建应用实例

  4. app.vue - 根组件 SFC单文件组件 script - template - style

    变化一：脚本script和模板template顺序调整

    变化二：模板template不再要求唯一根元素

    变化三：脚本script添加setup标识支持组合式API

  5. index.html - 单页入口 提供id为app的挂载点

1. 入口文件

// vue3
import {createApp} from 'vue'

// import pinia from '@/stores'
// import router from '@/router'

import App from './App.vue'
const app = createApp(App)
// app.use(pinia)
// app.use(router)
app.mount('#app')

// vue2
import Vue from 'vue'
import App from './App.vue'
// import router from './router'
// import store from './store'
cosnt vm = new Vue({
  // router,
  // store,
  render: (h) => h(App),
})
vm.$mount("#app")
  1. 引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数（不兼容之前写法）
  2. 创建应用实例对象-app（类似于之前vue2中的vm，但是app比vm更轻）
  3. 挂载

2. App.vue

image.png

vue3组件中的模板结构可以没有唯一根标签

<!-- vue2 -->
<template>
  <div id="app">
    *****代码*****
  </div>
</template>

<!-- vue3 -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWord msg="Welcome to Your Vue.js App"/>
</template>

<script setup>加上 setup 允许在 script 中直接编写组合式API

vue3 中想要导入一个组件并且局部注册，只需要 import 导入组件就可以直接在 template 中直接使用，不需要组件注册

若使用 Element-plus 的按需自动导入，components 下的文件也默认会被自动注册(甚至不需要import，直接在页面内使用即可)

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

二、常用 Composition API

官方文档: v3.cn.vuejs.org/guide/compo…

1.拉开序幕的setup

  1. 理解：Vue3.0中一个新的配置项，值为一个函数。

  2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

  3. 组件中所用到的：数据、方法等等，均要配置在 setup 中。

    注意：数据和方法需要在 setup 最后 return 了，才能在模板中应用。

    但是写什么都要 return 太麻烦了，有没有简单用法？有 <script setup> 语法糖

    通过 <script setup> 语法糖 简化代码

    image.png

  4. setup函数的两种返回值：

    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

  5. 注意点：

    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
//setup函数的两种返回值-返回对象（常用）
<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>
//暂不考虑响应式
export default {
  name: 'App',
  setup() {
    //数据
    let name = "张三"
    let age = 18
    //方法
    function sayHello() {
      alert(`我叫${name}，我${age}岁了，你好啊！`)
    }
    return {
      name,
      age,
      sayHello
    }
  }
}

//setup函数的两种返回值-返回渲染函数
<script>
import {h} from 'vue'
export default {
  name: 'App',
  setup() {
    //模板里返回什么已经不重要的，就以渲染函数为主
    return () => h('h1', '尚硅谷')
  }
}
</script>

总结

  1. setup 选项的执行时机？

    beforeCreate 钩子之前 自动执行

  2. setup 写代码的特点是什么？

    定义数据 + 函数 然后以对象方式 return

  3. <script setup> 解决了什么问题？

    经过语法糖的封装更简单的使用组合式API

  4. setup 中的 this 还指向组件实例吗？

    指向 undefined

2. reactive和ref函数

ref函数

  • 作用: 定义一个响应式的数据(接收简单类型或者对象类型的数据传入并返回一个响应式的对象)
  • 语法: const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    • JS中操作数据： xxx.value
    • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  • 核心步骤：
    1. 从 vue 包中导入 ref 函数
    2. 在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值
  • 备注：
    • 接收的数据可以是：基本类型、也可以是对象类型。
    • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
    • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。（从根上来说用的是es6的proxy，vue3将proxy封装在reactive函数里面，也就是说reactive函数里面封装了对proxy的实现）
<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>工作薪水：{{job.salary}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let name = ref("张三")
    let age = ref(18)
    let job = ref({
      type: '前端',
      salary: '30k'
    })
    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 19
      job.value.type = 'UI'
    }
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

image.png

reactive函数

  • 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）（接受对象类型数据的参数传入并返回一个响应式的对象）
  • 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
  • 核心步骤
    1. 从 vue 包中导入 reactive 函数
    2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值
  • reactive定义的响应式数据是“深层次的”。
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>工作薪水：{{job.salary}}</h2>
  <h2>展示深层次的c：{{job.a.b.c}}</h2>
  <h2>爱好：{{hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let name = ref("张三")
    let age = ref(18)
    let job = reactive({
      type: '前端',
      salary: '30k',
      a: {
          b: {
              c: 666
          }
      }
    })
    let hobby = reactive(['抽烟', '喝酒'])
    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 19
      job.type = 'UI'
      job.a.b.c = 888
      hobby[0] = '学习'
    }
    return {
      name,
      age,
      job,
      hobby,
      changeInfo
    }
  }
}
</script>

总结

  1. reactive和ref函数的共同作用是什么 ？

    用函数调用的方式生成响应式数据

  2. reactive vs ref ？

    reactive不能处理简单类型的数据

    ref参数类型支持更好但是必须通过.value访问修改

    ref函数的内部实现依赖于reactive函数

  3. 在实际工作中推荐使用哪个？

    推荐使用ref函数，更加灵活统一

4.Vue3.0中的响应式原理

vue2.x的响应式

  • 实现原理：

    • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

      Object.defineProperty(data, 'count', {
    get () {//有人读取count属性}, 
    set () {//有人修改count属性}
})

  • 存在问题：

    • 新增属性、删除属性, 界面不会更新。
    • 直接通过下标修改数组, 界面不会自动更新。

  • vue2中存在问题的解决方式

    1. 对象添加属性
      • this.$set(this.person, 'sex', '女')
      • Vue.set(this.person, 'sex', '女')
    2. 对象删除属性
      • this.$delete(this.person, 'name')
      • Vue.delete(this.person, 'name')
    3. 修改数组
      • this.$set(this.person.hobby, 0, '逛街')
      • Vue.set(this.person.hobby, 0, '逛街')
      • this.person.hobby.splice(0,1,'逛街')

Vue3.0的响应式

  • 实现原理:

    • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

    • 通过Reflect（反射）: 对源对象的属性进行操作。

    • MDN文档中描述的Proxy与Reflect：

      （注意：ECMA正在尝试将Object上很多有用的api移植到Reflect上）

      ```js
//在vue3中新增属性、删除属性，以及直接通过下标修改数组,界面都会自动更新，没有vue2中的问题
//vue3中对象添加属性
person.sex = '男'
//vue3中删除对象某个属性
delete person.name
//vue3中数组通过下标修改
person.hobby[0] = '学习'
```

```js
//实现代理，对p的增删改查后，person也跟着修改了
let person = {
    name: '张三',
    age: 18
}
const p = new Proxy(person, {})
//注意：这不是响应式，响应式是要捕获各种操作，去更新页面
```

```js
new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
        //return target[prop]
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
            //return target[prop] = value
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
            //return delete target[prop]
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'   
```

5.reactive对比ref

  • 从定义数据角度对比：
    • ref用来定义：基本类型数据。
    • reactive用来定义：对象（或数组）类型数据。
    • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
  • 从原理角度对比：
    • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
    • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
  • 从使用角度对比：
    • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
    • reactive定义的数据：操作数据与读取数据：均不需要.value。

6.setup的两个注意点

  • setup执行的时机
    • 在beforeCreate之前执行一次，this是undefined。
  • setup的参数
    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context：上下文对象
      • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
      • slots: 收到的插槽内容, 相当于 this.$slots。
      • emit: 分发自定义事件的函数, 相当于 this.$emit。
//父组件
<template>
  <Demo @hello='showHello' msg="提示" school="某学校">
      <!-- 注意：在vue3中使用具名插槽最好使用 v-slot:插槽名字 这种写法 -->
    <template v-slot:qwe>
      <span>尚硅谷</span>
    </template>
  </Demo>
</template>

<script>
import Demo from './components/Demo.vue'
import {reactive} from 'vue'
export default {
  name: 'App',
  components: {
    Demo
  },
  setup() {
    function showHello(data) {
      alert(`hello ${data}`)
    }
    return {
      showHello
    }
  }
}
</script>

//子组件Demo
<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <button @click="test">触发hello</button>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'Demo',
  props: ['msg'],//注意：这里不接收属性，setup的第一个参数props就是空对象了；若传递过来的多个属性，但是props没全部接收，剩下的属性会在context.attrs里面，不过这种情况控制台会报警告
  emits: ['hello'],//这里不接收，直接在setup通过context.emit使用，控制台会有警告
  setup(props,context) {
    console.log('打印setup的props',props)
    console.log('打印setup的context',context)
    console.log('打印setup的context.attrs',context.attrs)
    console.log('打印setup的context.emit',context.emit)
    console.log('打印setup的context.slots',context.slots)
    let person = reactive({
      name: '张三',
    })
    function test() {
      context.emit('hello', person.name)
    }
    return {
      person,
      test
    }
  }
}
</script>

image.png

7.计算属性与监视

1.computed函数

  • 计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

  • 核心步骤：

    1. 导入 computed 函数
    2. 执行函数 在回调参数中 return 基于响应式数据做计算的值，用变量接收

    image.png

  • 写法

    import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    //这样也可以
    //person.fullName = computed(()=>{
    //    return person.firstName + '-' + person.lastName
    //})
    let fullName = computed(() => {
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

注意：

  1. 计算属性中不应该有“副作用”

    比如异步请求/修改dom

  2. 避免直接修改计算属性的值

    计算属性应该是只读的，特殊情况可以配置 get set

2.watch函数

  • 与Vue2.x中watch配置功能一致

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

  • 两个小“坑”：

    • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
    • 监视reactive定义的响应式数据中某个属性（注意：这个属性是对象）时：deep配置有效。
    setup() {
    //数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20
            }
        }
    })

    //情况一：监视ref定义的一个响应式数据
    watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
    },{immediate:true})

    //情况二：监视多个ref定义的响应式数据：可以写多个watch分别监听单个数据，也可以写一个watch以数组的形式一起监听
    //watch([sum,msg],([newSum, newMsg],[oldSum, oldMsg])=>{
    watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变化了',newValue,oldValue)
        //点+1：[1, '你好啊'] [0, '你好啊']
        //点修改信息：[1, '你好啊！'] [1, '你好啊']
        //若增加{immediate:true}配置：[0, '你好啊'] []
    }) 

    /* 情况三：监视reactive定义的响应式数据的全部属性
       若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue，此时获取的oldValue是newValue！！
       若watch监视的是reactive定义的响应式数据，则强制开启了深度监视（deep配置无效）
    */
    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    },{immediate:true,deep:false}) //此处的deep配置不再奏效

    //情况四：监视reactive定义的响应式数据中的某个属性
    watch(()=>person.name,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true}) 

    //情况五：监视reactive定义的响应式数据中的某些属性
    watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true})

    //特殊情况，job下的salary++，监视的是job，修改的是job下的某个属性
    //这个时候监视不到
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
        //job下的salary++，无法进入这里
    }) 
    //必须开启深度监视才有效，注意此处的oldValue无效
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
}

//注意：用watch监听ref定义的reactive函数，操作：修改姓名、增长年龄，涨薪
let person = ref({
    name: '张三',
    age: 18,
    job: {
        j1: {
            salary: 20
        }
    }
})
//直接监听person无效，因为person.value的地址值没有发生变化
watch(()=>person,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    })
}
//监测的不再是ref定义的数据，而是ref求助reacttive定义的数据
watch(()=>person.value,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    })
}
//直接监听person无效，因为person.value的地址值没有发生变化，但是开启深度监视就可以了
watch(()=>person,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:true})
}

总结

  1. 作为watch函数的第一个参数，ref对象需要添加.value吗？

    不需要，第一个参数就是传 ref 对象

  2. watch只能侦听单个数据吗？

    单个 或者 多个

  3. 不开启deep，直接监视 复杂类型，修改属性 能触发回调吗？

    不能，默认是浅层侦听

  4. 不开启deep，精确侦听对象的某个属性？

    可以把第一个参数写成函数的写法，返回要监听的具体属性

3.watchEffect函数

  • watch的套路是：既要指明监视的属性，也要指明监视的回调。

  • watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。（注意：一上来会先执行一次）

  • watchEffect有点像computed：

    • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
    //一上来会执行一次，像是开启了immediate:true
watchEffect(()=>{
    console.log('watchEffect配置的回调执行了')
})

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

8.生命周期

Vue3的生命周期API （选项式 VS 组合式）

image.png

vue2和vue3对比

  • Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
    • beforeDestroy改名为 beforeUnmount
    • destroyed改名为 unmounted
  • Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted

生命周期函数基本使用

  1. 导入生命周期函数

  2. 执行生命周期函数 传入回调

import { onMounted } from 'vue'
onMounted( () => {
  //自定义逻辑
})

生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时依次执行

9.自定义hook函数

  • 什么是hook？—— 本质是一个函数，把setup函数中使用的组合 APIComposition API进行了封装。

  • 类似于vue2.x中的mixin。

  • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

image.png

image.png

10.toRef

  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

  • 语法：const name = toRef(person,'name')

  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

  • 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

image.png

下图为打印x的信息 image.png

三、其它 Composition API

1.shallowReactive 与 shallowRef

  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

  • shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

  • 什么时候使用?

    • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2.readonly 与 shallowReadonly

  • readonly: 让一个响应式数据变为只读的（深只读）。
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）。
  • 应用场景: 不希望数据被修改时。

3.toRaw 与 markRaw

  • toRaw：
    • 作用：将一个由reactive生成的响应式对象转为普通对象。
    • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
  • markRaw：
    • 作用：标记一个对象，使其永远不会再成为响应式对象。
    • 应用场景:
      1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4.customRef

  • 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

  • 实现防抖效果：

    <template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

5.provide 与 inject

f766fada7fdb47b59a1191e3402e9bb2~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.awebp

  • 作用：实现祖与后代组件间通信（顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信）

  • 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

  • 具体写法：

    1. 祖组件中：

      setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

    2. 后代组件中：

      setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

// 跨层传递函数 => 给子孙后代传递可以修改数据的方法
provide('changeCount', (newCount) => {
  count.value = newCount
})

<script setup>
import { inject } from 'vue'
const themeColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')
const clickFn = () => {
  changeCount(1000)
}
</script>

<template>
<div>
  <h3>我是底层组件-{{ themeColor }} - {{ count }}</h3>
  <button @click="clickFn">更新count</button>
</div>
</template>

总结

  1. provide和inject的作用是什么？

    跨层组件通信

  2. 如何在传递的过程中保持数据响应式？

    第二个参数传递ref对象

  3. 底层组件想要通知顶层组件做修改，如何做？

    传递方法，底层组件调用方法

  4. 一颗组件树中只有一个顶层或底层组件吗？

    相对概念，存在多个顶层和底层的关系

6.响应式数据的判断

  • isRef: 检查一个值是否为一个 ref 对象
  • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

7. 父子通信 defineProps defineEmits

父传子

  1. 父组件中给子组件，添加属性的方式传值

  2. 在子组件内，通过props接收（通过 defineProps "编译器宏"接收子组件传递的数据）

    defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

子传父

  1. 父组件中给子组件标签通过@绑定事件
  2. 在子组件内部，emit触发事件 (编译器宏获取)
    • 通过 defineEmits 编译器宏生成emit方法 const emit = defieEmits(['get-message'])
    • 触发自定义事件，并传递参数 emit('get-message', 'this is son msg')

父组件

<script setup>
// 局部组件(导入进来就能用)
import { ref } from 'vue'
import SonCom from '@/components/son-com.vue'

const money = ref(100)
const getMoney = () => {
  money.value += 10
}
const changeFn = (newMoney) => {
  money.value = newMoney
}
</script>

<template>
  <div>
    <h3>
      父组件 - {{ money }}
      <button @click="getMoney">挣钱</button>
    </h3>
    <!-- 给子组件，添加属性的方式传值 -->
    <SonCom
      @changeMoney="changeFn"
      car="宝马车"
      :money="money">
    </SonCom>
  </div>
</template>

子组件

<script setup>
// 注意：由于写了 setup，所以无法直接配置 props 选项
// 所以：此处需要借助于 “编译器宏” 函数接收子组件传递的数据
const props = defineProps({
  car: String,
  money: Number
})
const emit = defineEmits(['changeMoney'])
console.log(props.car)
console.log(props.money)

const buy = () => {
  // 需要 emit 触发事件
  emit('changeMoney', 5)
}
</script>

<template>
  <!-- 对于props传递过来的数据，模板中可以直接使用 -->
  <div class="son">
    我是子组件 - {{ car }} - {{ money }}
    <button @click="buy">花钱</button>
  </div>
</template>

<style scoped>
.son {
  border: 1px solid #000;
  padding: 30px;
}
</style>

总结

父传子

  1. 父传子的过程中通过什么方式接收props？

    defineProps( { 属性名：类型 } )

  2. setup语法糖中如何使用父组件传过来的数据？

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

    props.xxx

子传父

  1. 子传父的过程中通过什么方式得到emit方法？

    defineEmits( [‘事件名称’] )

  2. 怎么触发事件

    emit('自定义事件名' , 参数)

8. 模版引用 defineExpose

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

使用

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

  2. 通过 ref 标识绑定 ref 对象到标签

<script setup>
import TestCom from '@/components/test-com.vue'
import { onMounted, ref } from 'vue'

// 模板引用(可以获取dom，也可以获取组件)
// 1. 调用ref函数，生成一个ref对象
// 2. 通过ref标识，进行绑定
// 3. 通过ref对象.value即可访问到绑定的元素(必须渲染完成后，才能拿到)
const inp = ref(null)

// 生命周期钩子 onMounted
onMounted(() => {
  // console.log(inp.value)
  // inp.value.focus()
})
const clickFn = () => {
  inp.value.focus()
}

// --------------------------------------
const testRef = ref(null)
const getCom = () => {
  // 如果不使用defineExpose暴露，则这里无法获取
  console.log(testRef.value.count)
  testRef.value.sayHi()
}
</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击让输入框聚焦</button>
  </div>
  <TestCom ref="testRef"></TestCom>
  <button @click="getCom">获取组件</button>
</template>

test-com.vue

<script setup>
const count = 999
const sayHi = () => {
  console.log('打招呼')
}

defineExpose({
  count,
  sayHi
})
</script>

<template>
  <div>
    我是用于测试的组件 - {{ count }}
  </div>
</template>

defineExpose()

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

总结

  1. 获取模板引用的时机是什么？

    组件挂载完毕

  2. defineExpose编译宏的作用是什么？

    显式暴露组件内部的属性和方法

9. defineOptions-Vue3.3新特性

背景说明：

有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。

但是用了 <script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。但这只解决了 props 与 emits 这两个属性。

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的 <script> 标签。

这样就会存在两个 <script> 标签。让人无法接受。

所以在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）

<script setup>
defineOptions({
  name: 'LoginIndex'
})
</script>

10. defineModel-Vue3.3新特性

v-model

在Vue3中，自定义组件上使用 v-model, 相当于传递一个modelValue 属性，同时触发 update:modelValue 事件

Vue2 => v-model :value和@input的简写

Vue3 => v-model :modelValue和@update:modelValue的简写

<Child v-model="isVisible">

//相当于
<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">

我们需要先定义 props，再定义 emits 。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。

父组件 App.vue

<script setup>
import MyInput from '@/components/my-input.vue'
import { ref } from 'vue'
const txt = ref('123456')
</script>

<template>
<div>
  <MyInput v-model="txt"></MyInput>
  {{ txt }}
</div>
</template>

子组件 src/components/my-input.vue

<script setup>
defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>

<template>
<div>
  <input
    type="text"
    :value="modelValue"
    @input="e => emit('update:modelValue', e.target.value)"
  >
</div>
</template>

使用 defineModel 后

父组件 App.vue（不变）

<script setup>
import MyInput from '@/components/my-input.vue'
import { ref } from 'vue'
const txt = ref('123456')
</script>

<template>
<div>
  <MyInput v-model="txt"></MyInput>
  {{ txt }}
</div>
</template>

子组件 src/components/my-input.vue

<script setup>
import { defineModel } from 'vue'
const modelValue = defineModel()
</script>
<template>
<div>
  <input 
    type="text"
    :value="modelValue"
    @input="e => modelValue = e.target.value"
  >
</div>
</template>

若Vue的版本小于3.3，此时刷新页面发现未生效，还需要一个配置（从 Vue 3.3 开始默认启用defineModel，不需要再配置了）

在 vite.config.js 中为 Plugins 的 vue() 增加配置

export default defineConfig({
  plugins: [
    vue()
  ]
})

//改为
plugins: [
    vue({
      script: {
        defineModel: true
      }
    })
]

此时重启项目就可以了

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏

四、Composition API 的优势

1.Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

2.Composition API 的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

五、新的组件

1.Fragment

  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用

2.Teleport

  • 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

    <teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

举例：弹框写在某个组件里面，但是希望展示的div代码在指
定位置，可以将代码写在
<teleport to="移动位置">代码</teleport>
注意：to里面可以写css选择器，比如
to="body"
to="#app"

3.Suspense

  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

  • 使用步骤：

    • 异步引入组件

      import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

    • 使用Suspense包裹组件，并配置好default 与 fallback

      <template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

default：就是组件要显示的内容

fallback：就是组件没加载完全的“备胎”（提示）

六、其他

1.全局API的转移

  • Vue 2.x 有许多全局 API 和配置。

    • 例如：注册全局组件、注册全局指令等。

      //注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

  • Vue3.0中对这些API做出了调整：

    • 将全局的API，即：Vue.xxx调整到应用实例（app）上

      2.x 全局 API（Vue）3.x 实例 API (app)
      Vue.config.xxxxapp.config.xxxx
      Vue.config.productionTip移除
      Vue.componentapp.component
      Vue.directiveapp.directive
      Vue.mixinapp.mixin
      Vue.useapp.use
      Vue.prototypeapp.config.globalProperties

2.其他改变

  • data选项应始终被声明为一个函数。

  • 过度类名的更改：

    • Vue2.x写法

      .v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

    • Vue3.x写法

      .v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

  • 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

  • 移除v-on.native修饰符

    • 父组件中绑定事件

      <my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

    • 子组件中声明自定义事件

      <script>
  export default {
    emits: ['close']
  }
</script>

  • 移除过滤器（filter）

    过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

  • ......

七、常用插件

1. Pinia 快速入门

1.1 什么是Pinia

Pinia 是 Vue 的最新 状态管理工具 ，是 Vuex 的 替代品

  1. 提供更加简单的API （去掉了 mutation ）

  2. 提供符合，组合式风格的API （和 Vue3 新语法统一）

  3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块

  4. 配合 TypeScript 更加友好，提供可靠的类型推断

1.2 手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加

现在我们初次学习，从零开始：

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

    npm create vue@latest

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

    stores/index.js

    // 创建Pinia实例
import { createPinia } from 'pinia'
const pinia = createPinia()
export defualt pinia

    main.js

    import { createApp } from "vue"
import pinia from '@/stores'
import App from './App.vue'

const app = createApp(App)
app.use(pinia) // pinia的安装配置
app.mount("#app")

  3. 使用 (定义store，组件使用store)

    1. 定义store（state + action）

      const usexxxStore = defineStore(仓库的唯一id标识, () => { ... })

    为了养成习惯性的用法，将返回的函数命名为 use...  是一个符合组合式函数风格的约定。比如 useCounterStore

    defineStore() 的参数

    第一个参数要求是一个独一无二的名字：这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools

    第二个参数可接受两类值：Setup 函数或 Option 对象。

    Option Store

    import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

    Setup Store

    import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)

  // 声明操作数据的方法 action (普通函数)
  const addCount = () => count.value++
  const subCount = () => count.value--

  // 声明基于数据派生的计算属性 getters (computed)
  const double = computed(() => count.value * 2)

  return {
    count,
    double,
    addCount,
    subCount
  }
})
    1. 组件使用store

    App.vue

    <script setup>
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
</script>

<template>
  <div>
    <h3>
      App.vue根组件 - {{ counterStore.count }} - {{ counterStore.double }}
      <button @click="counterStore.addCount">+</button>
      <button @click="counterStore.subCount">-</button>
    </h3>
  </div>
</template>

  • getters实现

    Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去

  • action异步实现

    编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致

  • storeToRefs工具函数

    使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

  • Pinia的调试

    Vue官方的 dev-tools 调试工具 对 Pinia直接支持，可以直接进行调试

具体说明

vue3 使用组合式 api，所以 pinia 的举例以 Setup Store 为主

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入持久化的插件
import persist from 'pinia-plugin-persistedstate'

import App from './App.vue'
const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia.use(persist)) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)

  // 声明操作数据的方法 action (普通函数)
  const addCount = () => count.value++
  const subCount = () => count.value--

  // 声明基于数据派生的计算属性 getters (computed)
  const double = computed(() => count.value * 2)

  // 声明数据 state - msg
  const msg = ref('hello pinia')
  return {
    count,
    double,
    addCount,
    subCount,
    msg,
  }
})

App.vue

<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
// 此时，直接解构，不处理，数据会丢失响应式，仓库中的修改不会引起数据的变化了
//但是使用 storeToRefs包裹数据就还是响应式的
//const { count, msg } = counterStore
//const { count, msg } = storeToRefs(counterStore)
</script>

<template>
  <div>
    <h3>
      App.vue根组件 - {{ counterStore.count }} - {{ counterStore.msg }}
      <button @click="counterStore.addCount">+</button>
      <button @click="counterStore.subCount">-</button>
    </h3>
  </div>
</template>

1.3 Pinia持久化插件

官方文档：prazdevs.github.io/pinia-plugi…

  1. 安装插件 pinia-plugin-persistedstate

    npm i pinia-plugin-persistedstate

  2. main.js 使用

    import persist from 'pinia-plugin-persistedstate'

    ... const pinia = createPinia() // 创建Pinia实例

    app.use(pinia.use(persist))

  3. store仓库中，persist: true 开启

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)
  return {
    count
  }
}, {
  // persist: true // 开启当前模块的持久化
  persist: {
    key: 'hm-counter', // 修改本地存储的唯一标识
    paths: ['count'] // 存储的是哪些数据
  }
})

1.4 优化

pinia 独立维护

  • 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

  • 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

优化后

stores/index.js

import { createPinia } from 'pinia'
// 导入持久化的插件
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia() // 创建Pinia实例
pinia.use(persist) // pinia插件的安装配置
export default pinia

main.js

import { createApp } from 'vue'
import { pinia } from '@/stores'

import App from './App.vue'
const app = createApp(App) // 创建根实例
app.use(pinia)
app.mount('#app') // 视图的挂载
仓库统一导出

  • 现在：使用一个仓库 import { useUserStore } from ./stores/user.js， 不同仓库路径不一致

    import { useUserStore } from `./stores/user.js`
import { useCounterStore } from '@/store/counter'

  • 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中 将 stores/modules 下的文件全部引入 stores/index.js中

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

export * from './modules/user'
export * from './modules/counter'

// import { useUserStore } from './modules/user'
// export { useUserStore }
// import { useCountStore } from './modules/counter'
// export { useCountStore }

// 在页面中使用,导入路径统一
import { useCounterStore, useUserStore } from '@/store' 
const counterStore = useCounterStore()
const userStore = useUserStore()

1.5 总结

  1. Pinia是用来做什么的？

    新一代的状态管理工具，替代vuex

  2. Pinia中还需要mutation吗？

    不需要，action 既支持同步也支持异步

  3. Pinia如何实现getter？

    computed计算属性函数

  4. Pinia产生的Store如何解构赋值数据保持响应式？

    storeToRefs

  5. Pinia 如何快速实现持久化？

    pinia-plugin-persistedstate

2. 路由

2.1 vue2和vue3配置路由对比

Vue2 VueRouter3，下载：npm i vue-router@3

Vue3 VueRouter4，下载：npm i vue-router

  • vue2

    router/index.js

    import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  // mode 定义路由模式,hash：哈希模式，history：HTML5 History 模式
  mode: "hash",
  routes: [{ path: '/login', component: () => import('@/views/login') }]
})
export default router

    main.js

    import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

  • vue3

    router.js

    import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例
// 配置 history 路由模式
// 1. history模式：createWebHistory     地址栏不带 #
// 2. hash模式：   createWebHashHistory 地址栏带 #
// 参数 import.meta.env.BASE_URL 是基础路径，默认/

// vite 中的环境变量 import.meta.env.BASE_URL  就是 vite.config.js 中的 base 配置项
// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path，路由这就会加上 my-path 前缀了
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [{ path: '/login', component: () => import('@/views/login/LoginPage.vue') },]
})
//全局前置拦截守卫。。。
export default router

    main.js

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

import.meta.env.BASE_URL 是Vite 环境变量：cn.vitejs.dev/guide/env-a…

2.2 使用路由

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const getList = () => {
  router.push('/list')
}
</script>

2.3 全局前置守卫

router.beforeEach((to, from) => {})

每个守卫方法接收两个参数：

  • to: 即将要进入的目标
  • from: 当前导航正要离开的路由
  • 可选的第三个参数 next，在之前的 Vue Router 版本中，还可以使用 第三个参数 next 。这是一个常见的错误来源，我们经过 RFC 讨论将其移除。然而，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。

可以返回的值如下:

  • false: 取消当前的导航，重置到 from 的地址页面。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)。
  • 一个路由地址【具体路径 /login 或 路径对象 { name: 'login' }】: 通过一个路由地址重定向到一个不同的地址，如同调用 router.push()，且可以传入诸如 replace: true 或 name: 'home' 之类的选项。它会中断当前的导航，同时用相同的 from 创建一个新导航。
  • undefined / true 直接放行
// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true  直接放行
// 2. false 拦回 from 的地址页面
// 3. 具体路径 或 路径对象  拦截到对应的地址
//    '/login'   { name: 'login' }
router.beforeEach((to, from) => {
  // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
  const useStore = useUserStore()
  if (!useStore.token && to.path !== '/login') return '/login'
})

2.4 路由缓存问题

什么是路由缓存问题

image.png

问题：一级分类的切换正好踩中该问题，组件实例复用，导致分类数据无法更新

routes: [
    {
      path: 'category/:id',
      component: Category
    }
]

解决问题的思路：

  1. 让组件实例不复用，强制销毁重建
  2. 监听路由变化，变化之后执行数据更新操作

具体方案

  • 方案一：给router-view添加key

    以当前路由完整路径为key的值，给router-view组件绑定 <RouterView :key="$route.fullPath" />

    存在问题：页面内所有请求都会重新请求

    image.png

  • 方案二：使用beforeRouteUpdate导航钩子

    beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可 image.png

路由缓存问题产生的原因是什么？

  • 路由只有参数变化时，会复用组件实例

俩种方案都可以解决路由缓存问题，如何选择呢？

  • 在意性能问题，选择onBeforeUpdate, 精细化控制
  • 不在意性能问题，选择key，简单粗暴

2.5 定制路由scrollBehavior

问题：页面有滚动条时，滚动到页面某个位置，切换路由后，滚动条位置不变，并没有随着路由切换重置到新页面的顶部

定制路由行为解决什么问题

  • 在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置

如何配置：vue-router支持 scrollBehavior 配置项，可以指定路由切换时的滚动位置

const router = createRouter({
  routes: [],
  // 路由滚动行为定制
  scrollBehavior () {
    return {
      top: 0
    }
  }
})

3. axios

vue3中axios用法和vue2中一致。

image.png

utils/request.js

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    // 获取 store 中存储的 token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // TODO 3. 处理业务失败
    // 处理业务失败, 给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

封装业务接口 api/xxx.js

import request from '@/utils/request'

export const userLoginService = ({ username, password }) => request.post('/api/login', { username, password })

建议：

接口命名最好采用：模块名+功能名+Service，比如 userLoginService

4. Element Plus

Element Plus 的使用

  1. 安装：pnpm add element-plus

  2. 配置按需导入：

    官方文档： element-plus.org/zh-CN/guide…

    按需自动导入插件安装完，配置 vite.config.ts 后 启动项目失败(报错：failed to load config from xxx\vite.config.js)，可能是两个插件的版本过高

  3. 直接使用组件

  4. 彩蛋： 配置按需导入后，默认 components 下的文件也会被 自动注册（不用导入可以直接在页面上使用）~

  5. 按需导入后，在页面上使用 ElMessage，编译器会提示组件不存在，但是页面上操作展示没问题。比如：ElMessage.success('操作成功')，因为ui组件按需引入了，但是编译器不知道。此时，需要在 eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

    module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

封装下拉框组件

vue2 v-model :value+input

vue3 v-model :modelValue+@update:modelValue

父组件

<script setup>
import ChannelSelect from './components/ChannelSelect.vue'
import { ref } from 'vue'
const cate_id = ref('')
</script>
<template>
    <channel-select v-model="cate_id"></channel-select>
</template>

子组件 components/ChannelSelect.vue

<script setup>
import { ref } from 'vue'

defineProps({
  modelValue: {
    type: [Number, String]
  }
})
const emit = defineEmits(['update:modelValue'])

const channelList = ref([
  {
    "id": 1,
    "cate_name": "电脑",
    "cate_alias": "comuter"
  },
  {
    "id": 2,
    "cate_name": "手机",
    "cate_alias": "phone"
  },
  {
    "id": 3,
    "cate_name": "护肤",
    "cate_alias": "hufu"
  }
])
</script>
<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    placeholder="请选择"
    clearable
  >
    <el-option v-for="channel in channelList" :id="channel.id" :label="channel.cate_name"  :value="channel.id" />
  </el-select>
</template>

ui框架已内置 dayjs

import { dayjs } from "element-plus"

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

汉语化/国际化

Element Plus 组件 默认 使用英语，如果你希望使用其他语言，需要进行特别配置。 汉语化

可进行全局化配置，由于组件都是放在app内，也可在app.vue内进行配置

<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

<template>
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
</template>

5. pnpm 包管理器 - 创建项目

一些优势：比同类工具快 2倍 左右、节省磁盘空间... www.pnpm.cn/

安装方式：npm install -g pnpm

创建项目：pnpm create vue

image.png

6. Eslint+prettier 配置代码风格

vscode 环境同步

  1. 安装了插件 ESlint，开启保存自动修复
  2. 禁用了插件 Prettier，并关闭保存自动格式化
// 在vscode 设置配置里面增加如下：
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs

  1. prettier 风格配置 prettier.io

    1. 单引号

    2. 不使用分号

    3. 宽度80字符

    4. 不加对象|数组最后逗号

    5. 换行符号不限制（win mac 不一致）

  2. vue组件名称多单词组成（忽略index.vue）

  3. props解构（关闭）

提示：安装Eslint且配置保存修复，不要开启默认的自动保存格式化

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

7. 基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

  1. git初始化 git init

  2. 初始化 husky 工具配置 typicode.github.io/husky/

    pnpm dlx husky-init && pnpm install

  3. 修改 .husky/pre-commit 文件

    pnpm lint

问题： 默认进行的是全量检查，耗时问题，历史问题。

解决：

lint-staged 配置

  1. 安装

    pnpm i lint-staged -D

  2. 配置 package.json

    {
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

  3. 修改 .husky/pre-commit 文件

    pnpm lint-staged

8. ChatGPT & Copilot

AI 的认知 & 讲解内容说明

认知同步：

  1. AI 早已不是新事物 (接受)

    语音识别，人脸识别，无人驾驶，智能机器人... (包括 ChatGPT 也是研发了多年的产物)

  2. AI 本质是智能工具 (认识)

    人工智能辅助，可以提升效率，但不具备思想意识，无法从零到一取代人类工作

  3. AI 一定会淘汰掉一部分人

    但一定会衍生出新的职业方向

    逆水行舟，不进则退；学会拥抱变化，尽早上车

两个工具 ChatGPT & Copilot

  1. ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)

    1. 正常注册流程 (IP限制，手机号限制)

    2. 三方整合产品

  2. 工具 Github Copilot 智能生成代码

ChatGPT 的基本使用 - Prompt 优化

AI 互动的过程中，容易出现的问题：

  • AI未能理解问题的核心要点
  • AI的回答过于宽泛 或 过于具体
  • AI提供了错误的信息或观点
  • AI未能提供有价值的建议或解决方案

在识别了问题所在之后，我们可以尝试以下策略来优化我们的Prompt：

  • 明确提问：

    确保问题表述清晰明确，关键字的准确度，决定了AI 对于需求的理解。

  • 细化需求：

    将问题拆分成多个小问题，可以帮助AI更具针对性地回答，也利于即时纠错。

  • 添加背景信息：

    提供有关问题背景的详细信息，也可以给 AI 预设一个角色，将有助于AI生成更具深度和价值的回答。

  • 适当引导：

    比如：“例如”、“请注意”、“请使用”等，来告诉模型你期望它做什么 或者 不做什么

  • 限制范围：

    通过限定回答的范围和长度，可以引导AI生成更精炼的回答

    ...
案例 - 前端简历
Prompt 优化前：

Prompt1:

前端简历
Prompt 优化后：

Prompt1:

背景：你是一名【具有三年开发经验】的前端开发工程师，这三年期间，前两年，你做的【金融】相关四个项目，最后一年做的是【医疗】相关领域的两个项目，且有一定的管理 10人+ 团队的经验。主要的技术栈：【Vue】 和 【小程序】。由于你是计算机软件工程专业，所以你具备一些Java后台、Mysql数据库的知识，也掌握一些基础的算法。

问题：你会如何编写你的简历个人技能介绍

要求：8条技能介绍，请注意：你不会 angular。

Prompt2：


基于上文情境，你会如何编写你的项目经验介绍

Prompt3：


你刚才说的方向完全没有问题，但是我想看到更多的项目技术亮点，项目业务解决方案。
请注意：每个项目3个技术亮点，3个业务解决方案。

工具 Github Copilot 智能生成代码的使用

安装步骤
  • 登录 github，试用 Copilot
  • 打开 vscode， 搜索并安装插件 Copilot
使用说明
  • 删除键：不接受
  • Tab键：接收
  • Ctrl + enter： 查看更多方案
静态结构 + 校验处理

chatgpt prompt 提示词参考：

请基于 elementPlus 和 Vue3 的语法，生成组件代码
要求：
一、表单结构要求
1. 组件中包含一个el-form表单，有四行内容，前三行是输入框，第四行是按钮
2. 第一行 label 登录名称，输入框禁用不可输入状态
3. 第二行 label 用户昵称，输入框可输入
4. 第三行 label 用户邮箱，输入框可输入
5. 第四行按钮，提交修改

二、校验需求
给昵称 和 邮箱添加校验
1. 昵称 nickname 必须是2-10位的非空字符串
2. 邮箱 email 符合邮箱格式即可，且不能为空

参考目标代码：


<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
const {
  user: { username, nickname, email, id }
} = useUserStore()
​
const userInfo = ref({ username, nickname, email, id })
​
const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}
</script>
​
<template>
  <page-container title="基本资料">
    <el-row>
      <el-col :span="12">
        <el-form
          :model="userInfo"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="登录名称">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>

9. VueUse Vue 组合式工具集

vueuse.nodejs.cn/

useScroll 获取滚动距离

使用步骤

  1. 安装 npm i @vueuse/core

  2. 页面引用并使用，具体代码如下

    // 实现吸顶交互
// 核心逻辑：根据滚动距离判断当前show类名是否显示，大于78显示，小于78，不显示
<script setup>
// vueUse
import { useScroll } from '@vueuse/core'
// 基于window对象去做滚动的
const { y } = useScroll(window)
</script>

<template>
  <div class="app-header-sticky" :class="{ show: y > 78 }">
    <!-- 省略部分代码 -->
  </div>
</template>

元素是否在视口内useIntersectionObserver

检测目标元素的可见性。

图片懒加载

场景：电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到，只有进入视口区域才发送图片请求

目标：<img v-img-lazy="item.picture">在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求

实现思路

  • 核心原理：图片进入视口才发送资源请求 image.png

实现思路步骤

  1. 没有安装过vueuse则先安装 npm i @vueuse/core

  2. 使用

    封装全局指令 directives/index.js

    // 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

    注册全局指令 main.js

    // 引入懒加载指令插件并且注册
import { createApp } from 'vue'
import App from './App.vue'
import { lazyPlugin } from '@/directives'
//...
const app = createApp(App)
//...
app.use(lazyPlugin)
app.mount('#app')

    在具体页面使用

    <template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    <ul class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
          <!-- 此时只有图片显示在视口才会被请求 -->
          <img v-img-lazy="item.picture" alt="">
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>
</template>

注意（上述代码已解决该问题，但是要知道这个事）

  • 重复监听问题

    useIntersectionObserver 对于元素的监听是一直存在的，除非手动停止监听，存在内存浪费

  • 解决思路

    在监听的图片第一次完成加载之后就停止监听

    const { stop } = useIntersectionObserver(
  el,
  ([{ isIntersecting }]) => {
    console.log(isIntersecting)
    if (isIntersecting) {
      // 进入视口区域
      el.src = binding.value
      stop()
    }
  }
)

useMouseInElement

与元素相关的反应式鼠标位置

图片预览：商品详情点击小图显示中图，放大镜放在中图上展示大图

image.png

image.png

<script setup>
import { ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'

// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
]

// 1.小图切换大图显示
const activeIndex = ref(0)

const enterhandler = (i) => {
  activeIndex.value = i
}

// 2. 获取鼠标相对位置
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)

// 3. 控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
const left = ref(0)
const top = ref(0)

const positionX = ref(0)
const positionY = ref(0)
watch([elementX, elementY, isOutside], () => {

  // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
  if (isOutside.value) return

  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100
  }

  // 处理边界
  if (elementX.value > 300) { left.value = 200 }
  if (elementX.value < 100) { left.value = 0 }

  if (elementY.value > 300) { top.value = 200 }
  if (elementY.value < 100) { top.value = 0 }

  // 控制大图的显示
  positionX.value = -left.value * 2
  positionY.value = -top.value * 2

})
</script>
<template>
  <div class="goods-image">

    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{ active: i === activeIndex }">
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large" :style="[
      {
        backgroundImage: `url(${imageList[0]})`,
        backgroundPositionX: `${positionX}px`,
        backgroundPositionY: `${positionY}px`,
      },
    ]" v-show="!isOutside"></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>

image.png

八、项目技巧

1. 纯展示类组件通用封装思路

组件封装解决了什么问题？

  1. 复用问题
  2. 业务维护问题

适用场景：

  • 在结构上非常相似，只是内容不同，通过组件封装可以实现复用结构的效果

核心思路

  • 把可复用的结构只写一次，把可能发生变化的部分抽象成组件参数（props / 插槽）

组件通用封装思路

  1. 搭建纯静态的部分，不管可变的部分

  2. 抽象可变的部分为组件参数

    非复杂的模版抽象成props，复杂的结构模版抽象为插槽

以新鲜好物和人气推荐模块为例

image.png

  • 主标题和副标题是纯文本，可以抽象成prop传入

  • 主体内容是复杂的模版，抽象成插槽传入

封装组件 HomePanel.vue

<script setup>
// 定义props
defineProps({
  // 主标题
  title: {
    type: String
  },
  // 副标题
  subTitle: {
    type: String
  }
})
</script>
<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <!-- 主标题和副标题 -->
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <slot />
    </div>
  </div>
</template>
<style scoped lang='scss'>
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
</style>

页面内使用组件 HomeHot.vue

<script setup>
import HomePanel from './HomePanel.vue'
import { getHotAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'
const hotList = ref([])
const getHotList = async () => {
  const res = await getHotAPI()
  hotList.value = res.result
}
onMounted(() => getHotList())
</script>
<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    <ul class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
           
          <img v-img-lazy="item.picture" alt="">
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>
</template>
<style scoped lang='scss'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 426px;
  li {
    width: 306px;
    height: 406px;
    transition: all .5s;
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>

2. 自定义hook-使用逻辑函数拆分业务

基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性

image.png

实现步骤：

  1. 按照业务声明以 use 打头的逻辑函数

  2. 把独立的业务逻辑封装到各个函数内部

  3. 函数内部把组件中需要用到的数据或者方法return出去

  4. 在组件中调用函数把数据或者方法组合回来使用

以轮播图为例：

views/Category/composables/useBanner.js

// 封装banner轮播图相关的业务代码
import { ref, onMounted } from 'vue'
import { getBannerAPI } from '@/apis/home'

export function useBanner () {
  const bannerList = ref([])
  const getBanner = async () => {
    const res = await getBannerAPI({
      distributionSite: '2'
    })
    console.log(res)
    bannerList.value = res.result
  }
  onMounted(() => getBanner())

  return {
    bannerList
  }
}

views/Category/index.vue

<script setup>
import { useBanner } from './composables/useBanner'
const { bannerList } = useBanner()
</script>
<template>
  <!-- 轮播图 -->
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

核心思想总结

  1. 逻辑拆分的过程是一个拆分再组合的过程 image.png

  2. 函数use打头，内部封装逻辑，return组件需要用到的数据和方法给组件消费 image.png

3. 渲染模版时遇到对象的多层属性访问可能出现的问题？

image.png

解决方案：

  1. 可选链 ?.

    <div>{{ goods.details?.name }}</div>

  2. v-if 控制渲染

    <div v-if="goods.details">
    <div>{{ goods.details.name }}</div>
</div>

4. 父组件通过类型区分展示内容computed使用

<!-- 24热榜+专题推荐 -->
<div class="goods-aside">
  <!-- 24小时 -->
  <DetailHot :hot-type="1" />
  <!-- 周 -->
  <DetailHot :hot-type="2" />
</div>

DetailHot.vue

<script setup>
const props = defineProps({
  hotType: {
    type: Number
  }
})

// 适配title 1 - 24小时热榜  2-周热榜
const TYPEMAP = {
  1: '24小时热榜',
  2: '周热榜'
}
// 通过计算属性获取title
const title = computed(() => TYPEMAP[props.hotType])
</script>

5. 使用组件

问：在实际工作中，经常会遇到别人写好的组件，熟悉一个三方组件，首先重点看什么？

答：props和emit，props决定了当前组件接收什么数据，emit决定了会产出什么数据

验证组件是否成功使用：

image.png

6. 通用组件统一注册全局

注意：Element Plus 配置自动按需导入后，默认 components 下的文件也会被自动注册，就无需注册全局了

为什么要优化

  • 背景：components目录下有可能还会有很多其他通用型组件，有可能在多个业务模块中共享，所有统一进行全局组件注册比较好

image.png

components/index.js

// 把components中的所组件都进行全局化注册
// 通过插件的方式
import ImageView from './ImageView/index.vue'
import Sku from './XtxSku/index.vue'
export const componentPlugin = {
  install (app) {
    // app.component('组件名字'，组件配置对象)
    app.component('XtxImageView', ImageView)
    app.component('XtxSku', Sku)
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

// 引入全局组件插件
import { componentPlugin } from '@/components'
const app = createApp(App)
const pinia = createPinia()
app.use(componentPlugin)
app.mount('#app')
avatar
文章
阅读
粉丝