注意

Vue3

• 更容易维护
  • 组合式 API
  • 更好的 TypeScript 支持
• 更快的速度
  • 重写 diff 算法
  • 模版编译优化
  • 更高效的组件初始化
• 更小的体积
  • 良好的 TreeShaking
  • 按需引入
• 更优的数据响应式
  • Proxy

注意

• setup 选项的执行时机？

  • beforeCreate 钩子之前 自动执行

    

• setup 写代码的特点是什么

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

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

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

• setup 中的 this 还指向组件实例吗？指向 undefined

注意

reactive()

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

核心步骤：

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

1. 从 vue 包中导入 reactive 函数
2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

注意

ref()

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

核心步骤：

<script setup>
	// 导入
    import { ref } from 'vue';
    // 执行函数 传入函数 变量接收
    const count = ref(对象类型数据);
</script>

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

注意

computed 计算属性函数

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

核心步骤：

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

<script setup>
	// 导入
    import { computed } from 'vue';
    // 执行函数 变量接受 在回调参数中 return 计算值
    const computedState = computed(() => {
		return 基于响应式数据做计算之后的值;
    })
</script>

注意

watch 函数

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

俩个额外参数：

1. immediate（立即执行）
2. deep（深度侦听）

基础使用-侦听单个数据

1. 导入 watch 函数
2. 执行 watch 函数传入要侦听的响应式数据**（ref 对象）**和回调函数

注意

基础使用-侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

<script setup>
	import { ref, watch } from 'vue';
	const count = ref(0);
	const name = ref('cp');
	const setCount = () => {
		count.value++;
	}
	const setName = () => {
		name.value = 'pc';
	}
	watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
		console.log(`count: ${newCount}, name: ${newName}, oldCount: ${oldCount}, oldName: ${oldName}`);
	});
</script>
 
<template>
	<button @click="setCount">{{ count }}</button>
	<button @click="setName">{{ name }}</button>
</template>

注意

immediate

说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调

<script setup>
	import { ref, watch } from 'vue';
	const count = ref(0);
	watch(count, (newVal, oldVal) => {
		console.log(`count 值改变了，新值：${newVal}, 旧值：${oldVal}`);
	}, { immediate: true });
</script>
 
<template>
	<div>
		原始响应式数组 - {{ list }}
		<br>
		计算响应式数组 - {{ computedList }}
	</div>
</template>

count 值改变了，新值：0, 旧值：undefined

注意

deep

**默认机制：**通过 watch 监听的 ref 对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启 deep 选项

<script setup>
	import { ref, watch } from 'vue';
	const state = ref({count: 0});
	const changeStateByCount = () => {
		state.value.count++;
	}
	watch(state, () => {
		console.log('state changed: ', state.value.count);
	}, { deep: true })
</script>
 
<template>
	<div>
		{{ state.count }}
		<button @click="changeStateByCount">+</button>
	</div>
</template>

注意

精确侦听对象的某个属性

需求：在不开启 deep 的前提下，侦听 age 的变化，只有 age 变化时才执行回调

<script setup>
	import { ref, watch } from 'vue';
	const state = ref({name: 'chaichai', age: 18});
	const changeName = () => {
		state.value.name = 'chaichai-teacher';
	}
	const changeAge = () => {
		state.value.age = 20;
	}
	watch(() => state.value.age, () => { console.log('age changed'); });
</script>
 
<template>
	<div>
		<div>当前 name -- {{ state.name }}</div>
		<div>当前 age -- {{ state.age }}</div>
		<div>
			<button @click="changeName">修改 name</button>
			<button @click="changeAge">修改 age</button>
		</div>
	</div>
</template>

注意

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

   不需要，watch 会自动读取

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

   单个或者多个

3. 不开启 deep，直接修改嵌套属性能触发回调吗？

   不能，默认是浅层侦听

4. 不开启 deep，想在某个层次比较深的属性变化时执行回调怎么做？

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

注意

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

生命周期函数基本使用

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

执行多次

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

<script setup>
	import { onMounted } from 'vue';
	onMounted(() => {
		console.log('mounted', 1);
	});
	onMounted(() => {
		console.log('mounted', 2);
	});
	onMounted(() => {
		console.log('mounted', 3);
	});
</script>
 
<template>
	<div>
	</div>
</template>

mounted 1
mounted 2
mounted 3

1. 组合式 API 中生命周期函数的格式是什么？

   on + 生命周期名字

2. 组合式 API 中可以使用 onCreated 吗？

   没有这个钩子函数，直接写到 setup 中

3. 组合式 API 中组件卸载完毕时执行哪个函数？

   onUnmounted

注意

组合式 API 下的父传子

基本思想

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

   <script setup>
   	import { ref } from 'vue';
   	import SonCom from './components/son-com.vue';
   	const count = ref(100);
   </script>
    
   <template>
   	<div class="father">
   		<h2>父组件 App</h2>
   		<SonCom :count="count" message="来自父组件的消息"/>
   	</div>
   </template>

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

   <script setup>
   const props = defineProps({
       message: String,
       count: Number
   })
   </script>
                                                   
   <template>
       <div class="son">
           <h3>子组件</h3>
           <div>
               父组件传入的数据 - {{ message }} - 父组件传入的计数 - {{ count }}
           </div>
       </div>
   </template>

父组件 App
子组件
父组件传入的数据 - 来自父组件的消息 - 父组件传入的计数 - 100

注意

组合式 API 下的子传父

基本思想

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

   <script setup>
   	import SonCom from './components/son-com.vue';
   	const getMessage = (msg) => {
   		console.log(msg);
   	}
   </script>
    
   <template>
   	<sonCom @get-message="getMessage"/>
   </template>

2. 子组件内部通过 $emit 方法触发事件

   <script setup>
   const emit = defineEmits(['get-message']);
   const sendMsg = () => {
       emit('get-message', 'hello');
   }
   </script>
                                                   
   <template>
       <button @click="sendMsg">sendMsg</button>
   </template>

注意

父传子

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

   defineProps({属性名:类型})

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

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

子传父

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

   defineEmits(['事件名称'])

注意

模板引用的概念

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

如何使用（以获取dom为例 组件同理）

1. 调用 ref 函数生成一个 ref 对象
2. 通过 ref 标识绑定 ref 对象到标签

<script setup>
	import { onMounted, ref } from 'vue';
	import SonCom from './components/son-com.vue';
 
	const h1Ref = ref(null);
	const comRef = ref(null);
 
	onMounted(() => {
		console.log(h1Ref.value);
		console.log(comRef.value);
	});
</script>
 
<template>
	<h1 ref="h1Ref">我是 dom 标签 h1</h1>
	<SonCom ref="comRef"/>
</template>

defineExpose()

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

注意

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

   组件挂载完毕

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

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

注意

作用和场景

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

跨层传递普通数据

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

   <script setup>
   	import { ref, provide } from 'vue';
       import RoomMsgItem from './room-msg-item.vue';
       // 组件嵌套关系：
       // RoomPage -> RoomMsgItem -> RoomMsgComment
    
       // 1. 顶层组件提供数据
       provide('data-key', 'this is room data')
    
       // 2. 传递响应式数据
       const count = ref(0);
       provide('count-key', count)
   </script>
    
   <template>
       <div>顶层组件<RoomMsgItem /></div>
   </template>

2. 中层组件啥也不做

   <script setup>
       import RoomMsgComment from './room-msg-comment.vue';
   </script>
    
   <template>
       <div>中层组件<RoomMsgComment /></div>
   </template>

3. 底层组件通过 inject 函数获取数据

   <script setup>
       import { inject } from 'vue';
                                                   
       const roomData = inject('data-key');
                                                   
       const countData = inject('count-key');
   </script>
                                                   
   <template>
       <div class="comment">
           底层组件
           <div>
               来自顶层组件中的数据为：{{ roomData }}
           </div>
           <div>
               来自顶层组件中的响应式数据：{{ countData }}
           </div>
       </div>
   </template>

顶层组件
中层组件
底层组件
来自顶层组件中的数据为：this is room data
来自顶层组件中的响应式数据：0

注意

项目地址 git clone http://git.itcast.cn/heimaqianduan/vue3-basic-project.git

1. 模版已经配置好了案例必须的安装包
2. 案例用到的接口在 README.MD文件 中
3. 案例项目有俩个分支，main 主分支为开发分支，complete 分支为完成版分支供开发完参考

注意

什么是 Pinia

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

1. 提供更加简单的 API（去掉了 mutation）
2. 提供符合组合式风格的 API（和 Vue3 新语法统一）
3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
4. 搭配 TypeScript 一起使用提供可靠的类型推断

注意

什么是别名路径联想提示

在编写代码的过程中，一旦 输入 @/，VSCode 会立刻 联想出 src 下的所有子目录和文件，统一文件路径访问不容易出错。

如何进行配置

1. 在项目的根目录下新增 jsconfig.json 文件

2. 添加 json 格式的配置项，如下：

   {
     "compilerOptions": {
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

配置完成：

注意

小兔鲜项目的组件分类

小兔鲜项目 UI 组件

• 通用型组件（ElementPlus）：Dialog 模态框
• 业务定制化组件（手写）：商品热榜组件

添加 ElementPlus 到项目（按需导入）

• 看文档 快速开始 | Element Plus

  • 安装

    npm install element-plus --save

  • 配置按需引入

    npm install -D unplugin-vue-components unplugin-auto-import

    配置 vite.config.js：

    import { fileURLToPath, URL } from 'node:url'
     
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueDevTools from 'vite-plugin-vue-devtools'
     
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
     
    // https://vite.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        vueDevTools(),
            AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        },
      },
    })

  • 测试组件

    

注意

为什么需要主题定制

小免鲜主题色和 elementPlus 默认的主题色存在冲突，通过定制主题让 elementPlus 的主题色和小免鲜项目保持一致

如何定制（scss 变量替换方案）

• 安装 scss：

  npm i sass -D

• 准备定制样式文件：

  styles/element/index.scss：

  @forward 'element-plus/theme-chalk/src/common/var.scss' with (
      $colors: (
          'primary': (
              'base': #27ba9b,
          ),
          'success': (
              'base': #1dc779,
          ),
          'warning': (
              'base': #ffb302,
          ),
          'danger': (
              'base': #e26237,
          ),
          'error': (
              'base': #cf4444,
          )
      )
  );

• 对 ElementPlus 样式进行覆盖

  通知 Element 采用 scss 语言 -> 导入定制 scss 文件覆盖

  import { fileURLToPath, URL } from 'node:url'
                              
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueDevTools from 'vite-plugin-vue-devtools'
                              
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
                              
  // https://vite.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
      vueDevTools(),
          AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/element/index.scss" as *;`
        }
      }
    }
  })

注意

axios 基础配置

1. 安装 axios

   npm i axios

2. 配置基础实例（统一接口配置）

   

   utils/http.js 中创建 axios 实例：

   import axios from 'axios';
                                             
   // 创建 axios 实例
   const http = axios.create({
       baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
       timeout: 5000
   });
                                             
   // 请求拦截器：在请求发送前修改配置，常用于添加身份验证或全局请求设置。
   http.interceptors.request.use(config => {
       // 在发送请求之前做某事
       return config;
   }, error => {
       // 请求错误时做些事
       return Promise.reject(error);
   });
                                             
   // 响应拦截器：在接收到响应后统一处理结果，常用于错误处理或数据格式转换。
   http.interceptors.response.use(response => response.result {
       // 对响应数据做点什么
       return response;
   }, error => {
       // 响应错误时做点什么
       return Promise.reject(error);
   });
                                             
   export default http;

   apis/testAPI.js 中创建 API：

   import httpInstance from '@/utils/http';
                                             
   export function getCategory() {
       return httpInstance({
           url: 'home/category/head'
       })
   }

   main.js 中测试接口函数：

   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
                                             
   import App from './App.vue'
   import router from './router'
                                             
   import { getCategory } from '@/apis/testAPI';
   getCategory().then(res => {
       console.log(res);
   });
                                             
   const app = createApp(App)
                                             
   app.use(createPinia())
   app.use(router)
                                             
   app.mount('#app')

注意

设计首页和登录页的路由（一级路由）

路由设计原则：找内容切换的区域，如果是页面整体切换，则为一级路由

创建：

App.vue：

<script setup>
 
</script>
 
<template>
    <RouterView/>
</template>

• views

  • Category

    • index.vue

      <template>
          <div>我是 Category 页</div>
      </template>

  • Home

    • index.vue

      <template>
          <div>我是 Home 页</div>
      </template>

  • Layout

    • index.vue

      <template>
          <div>我是首页</div>
          <RouterView/>
      </template>

  • Login

    • index.vue

      <template>
          <div>我是登录页</div>
      </template>

配置路由 router/index.js：

// createRouter: 创建 router 实例对象
// createWebHistory: 创建 history 模式的路由
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
 
 
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Layout,
            children: [
                {
                    path: '',
                    component: Home
                },
                {
                    path: 'category',
                    component: Category
                }
            ]
        },
        {
            path: '/login',
            component: Login
        },
    ],
})
 
export default router

此时服务器 http://localhost:5173/：

我是首页
我是 Home 页

http://localhost:5173/login：

我是登录页

http://localhost:5173/category：

我是首页
我是 Category 页

注意

图片资源和样式资源

资源说明

1. 实际工作中的图片资源通常由 UI 设计师 提供，常见的图片格式有 png, svg 等都是由 UI 切图交给前端
2. 样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写

资源操作

1. 图片资源-把 images 文件夹放到 assets 目录下

2. 样式资源-把 common.scss 文件放到 styles 目录下

   然后在 main.js 中引入：

   import '@/styles/common.scss'

注意

如何引入

阿里的字体图标库支持多种引入方式，小免鲜项目里采用的是 font-class 引用的方式，index.html 下：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css 这个地址的创建方法：

• 从 iconfont-阿里巴巴矢量图标库 找到喜欢的图表，添加入库：

  

• 从库中生成 Font class 连接：

  

注意

功能描述

使用后端接口渲染渲染一级路由导航

实现步骤

1. 根据接口文档封装接口函数
2. 发送请求获取数据列表
3. v-for 渲染页面

编辑 apis/layout.js：

import httpInstance from '@/utils/http';
 
export function getCategoryAPI() {
    return httpInstance({
        url: 'home/category/head'
    })
}

使用 v-for 将接收到的数据渲染到 LayoutHeader.vue：

<script setup>
    import { getCategoryAPI } from '@/apis/testAPI';
    import { onMounted, ref } from 'vue';
 
    const categoryList = ref([]);
    const getCategory = async () => {
        const res = await getCategoryAPI();
        categoryList.value = res.result;
    }
 
    onMounted(() => {
        getCategory();
    });
</script>
 
<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home" v-for="item in categoryList" :key="item.id">
          <RouterLink to="/">{{ item.name }}</RouterLink>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
      <!-- 头部购物车 -->
      
    </div>
  </header>
</template>

移除 main.js 中先前测试 axios 部分的代码：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
import '@/styles/common.scss'
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
 
app.mount('#app')

注意

吸顶交互

要求：浏览器在上下滚动的过程中，如果距离顶部的滚动距离大于 78px，吸顶导航显示，小于 78px 隐藏

• 准备吸顶导航组件 components/LayoutFixed.vue

  <script setup>
    
  </script>
    
  <template>
    <div class="app-header-sticky">
      <div class="container">
        <RouterLink class="logo" to="/" />
        <!-- 导航区域 -->
        <ul class="app-header-nav ">
          <li class="home">
            <RouterLink to="/">首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/">居家</RouterLink>
          </li>
          <li>
            <RouterLink to="/">美食</RouterLink>
          </li>
          <li>
            <RouterLink to="/">服饰</RouterLink>
          </li>
          <li>
            <RouterLink to="/">母婴</RouterLink>
          </li>
          <li>
            <RouterLink to="/">个护</RouterLink>
          </li>
          <li>
            <RouterLink to="/">严选</RouterLink>
          </li>
          <li>
            <RouterLink to="/">数码</RouterLink>
          </li>
          <li>
            <RouterLink to="/">运动</RouterLink>
          </li>
          <li>
            <RouterLink to="/">杂项</RouterLink>
          </li>
        </ul>
    
        <div class="right">
          <RouterLink to="/">品牌</RouterLink>
          <RouterLink to="/">专题</RouterLink>
        </div>
      </div>
    </div>
  </template>
   
  <style scoped lang='scss'>
  .app-header-sticky {
    width: 100%;
    height: 80px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
    // 此处为关键样式!!!
    // 状态一：往上平移自身高度 + 完全透明
    transform: translateY(-100%);
    opacity: 0;
   
    // 状态二：移除平移 + 完全不透明
    &.show {
      transition: all 0.3s linear;
      transform: none;
      opacity: 1;
    }
      
    .container {
      display: flex;
      align-items: center;
    }
      
    .logo {
      width: 200px;
      height: 80px;
      background: url("@/assets/images/logo.png") no-repeat right 2px;
      background-size: 160px auto;
    }
      
    .right {
      width: 220px;
      display: flex;
      text-align: center;
      padding-left: 40px;
      border-left: 2px solid $xtxColor;
      
      a {
        width: 38px;
        margin-right: 40px;
        font-size: 16px;
        line-height: 1;
      
        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
   
  .app-header-nav {
    width: 820px;
    display: flex;
    padding-left: 40px;
    position: relative;
    z-index: 998;
   
    li {
      margin-right: 40px;
      width: 38px;
      text-align: center;
      
      a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
      
        &:hover {
          color: $xtxColor;
          border-bottom: 1px solid $xtxColor;
        }
      }
      
      .active {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }
  }
  </style>

• 获取滚动数据：

  从 vueuse 中获取相关函数，安装这个库：

  npm i @vueuse/core

  在 LayoutFixed.vue 中实现这个逻辑：

  <script setup>
      import { useScroll } from '@vueuse/core';
      const { y } = useScroll(window);
  </script>
                            
  <template>
    <div class="app-header-sticky" :class="{ show: y > 78 }">
    ...