Vue3入们

Vue 3.x

一、课程大纲

1、官方文档

2、基础语法

3、Vue生态

二、课程内容

1、官方文档

Vue2.x官方文档：https://cn.vuejs.org/v2

• 官方文档，文档开头提示如果要使用vue3，指引链接可以直接跳转到vue3文档
• 注意事项：直接从vue2文档跳转到的vue3文档已经比较陈旧，不再推荐使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Vue3.x官方文档：https://v3.cn.vuejs.org/

• 注意事项：该文档内容已经过于陈旧，官方不再推荐使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eww2FgDX-1656941180677)(assets/image-20220701141432689.png)]

Vue3.x真实官方文档：https://staging-cn.vuejs.org/

• 结合了最新的实现技术的的Vue3.x官方文档
  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、基础语法

（1） 项目构建和启动

Vue3项目同样支持webpack脚手架：@vue/cli，但是不再推荐！

官方推荐Vite完成项目的创建、运行加载

① 创建项目

$ npm init vue@latest

② 启动项目

$ npm run dev

浏览器中访问：http://localhost:3000，看到如下界面，项目构建成功

（2） 选项式和组合式的差异

开发一个计数器应用，分别通过选项式、组合式开发应用，快速了解两种语法的差异

① 选项式开发

<template>
  <h3>选项式语法，开发计数器应用</h3>
  <p>计数器：{{ counter }}</p>
  <div>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
    // 通过data选项，声明一个响应式的数据
    data() {
        return {
            counter: 0
        }
    },
    // 通过methods选项，声明一个操作函数
    methods: {
        increment() {
            this.counter ++
        },
        decrement() {
            this.counter -- 
        }
    }
}
</script>

<style scoped>
</style>

② 组合式开发

<template>
  <h3>组合式语法，开发计数器应用</h3>
  <p>计数器数据：{{ counter }}</p>
  <div>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
// script标签中，添加setup属性

// 1、引入声明响应式数据的依赖模块
import { ref } from 'vue';

// 2、声明一个响应式数据
const counter = ref(0)

// 3、声明操作函数
const increment = () => {
    counter.value ++
}

const decrement = () => {
    counter.value -- 
}

</script>

<style>

</style>

③ 组合式语法强化

<template>
  <h3>组合式语法 + TypeScript</h3>
    <p>数据：{{ name }}</p>
    <button @click="changeName">修改数据</button>
</template>

<script setup lang="ts">
import {ref} from "vue"
import type {Ref} from "vue"

// 声明一个响应式数据
const name:Ref<string|number> = ref('大牧')

// 操作函数
const changeName = () => {
    name.value = 20
}

</script>

<style>

</style>

小总结：项目开发的时候，选择选项式开发？选择组合式开发？

理论上来说，选项式API和组合式API并没有太大的运行原理的区别，差异化的东西基本都集中在语法上；官方并没有非常明确的推荐

• 如果开发Vue2.x升级项目：推荐使用选项式语法直接升级，技术成本最低
• 如果开发全新Vue3.x项目：推荐使用组合式语法 + TypeScript语法支持

（3） 响应式数据

数据的声明和渲染，如何声明响应式数据？如何在页面中渲染？

① 响应式数据声明

<template>
  <h3>响应式数据处理</h3>
  <p>reactive数据：{{ user.name }}</p>
  <button @click="changeName">修改名称</button>
  <hr>
  <p>页码：{{ page }}</p>
  <button @click="changePage">修改页码</button>
</template>

<script setup>
// 1、reactive声明响应式数据
import {reactive} from "vue"

const user = reactive({name: "大牧"})

const changeName = () => {
    user.name = "DAMU"
}


// 2、ref声明响应式数据
import {ref} from "vue"

// ref本质上是将基本类型数据包装成对象
// 适用于任意类型的响应式数据的声明
const page = ref(1)  // {value: 1}

const changePage = () => {
    page.value = 12
}

</script>

<style>

</style>

小总结：项目开发中，既然有两种响应式数据声明方式，我们声明响应式数据时如何选择？

• 声明的响应式数据是一个对象，推荐使用reactive
• 声明的响应式数据是一个基本类型，推荐使用ref
• 遵循项目组开发规范

② 插值表达式

插值表达式的语法和功能，和Vue2.x基本一致！

• 插值表达式，渲染ref()声明的基本类型响应式数据时，不添加.value属性

<template>
	<!-- 这部分渲染输出，不要附带.value -->
	{{ count }}
</template>
<script setup>
  ...
  let count = ref(0)
  
  const change = () => {
    // 脚本代码中，修改数据需要附带.value
    count.value = 12
  }
</script>

（4） 监听器

Vue3.x提供了独立的组件watch来完成侦听器的处理，默认支持深度监听

<template>
  <h3>侦听器</h3>
    <p>页码：{{ page }}</p>
    <button @click="changePage">下一页</button>
</template>

<script setup>
import { ref, watch } from 'vue';

// 声明一个页码
const page = ref(0)

// 声明一个侦听器
watch(page, (newValue, oldValue) => {
    console.log(newValue, oldValue, "页码改变，获取新数据")
})

const changePage= () => {
    page.value ++
}

</script>

<style>

</style>

（5） 计算属性

<template>
  <h3>author: {{ library.author }}({{booksCnt}})</h3>
  <ul>
    <li v-for="book in library.books" :key="book.id">
        {{ book.name }}
    </li>
  </ul>
  <button @click="addBook">添加书籍</button>
</template>

<script setup>
import { reactive, computed } from 'vue';

const library = reactive({
    author: '杰克·罗琳',
    books: []
})

// 计算属性的声明方式
const booksCnt = computed(() => {
    return library.books.length 
})

const addBook = () => {
    const id = library.books.length
    const name = Math.random().toString(36).substring(2, 8)
    library.books.push({id, name})
}

</script>

<style>

</style>

3、综合开发

（1）Vue3.x生态

随着Vue3.x逐渐成熟，对应生态技术栈，以及第三方模块都在进行升级，目前已经可以通过Vue3.x开发比较成熟的、完善的应用

• Vue3.x：核心框架
• VueRouter4.x：路由框架
• Vuex4.x：由于架构问题逐渐不被生态系统使用，使用Pinia替代
• Pinia：状态管理模块
• Element-plus：界面组件库
• Vant：移动端组件库

（2）快速学习生态技术

① Vue如何和VueRouter结合

• 创建路由模块：src/router/index.ts

// createRouter：创建路由对象的工厂模块
// createWebHistory：指定路由匹配模块，对应history  | hash
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

主模块src/main.ts挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'

import router from './router'		// 引入路由模块

const app = createApp(App)

app.use(createPinia())
app.use(router)									// 挂载路由模块

app.mount('#app')

② Vue如何和状态管理模式结合