Vue3.0总结

01-vue3基本介绍

知道：vue3的现状以及它特点
大致内容：

• Vue3的现状
• 相关文档
• 了解框架优点特点
  具体落地：

1. Vue3的现状

2020 年 9 月 18 日发布，许多开发者还在观望。2022 年 2 月 7 日称为默认版本，意味着vue3是现在也是未来。

组件（插件）名称	官方地址	简介
ant-design-vue	https://antdv.com/docs/vue/introduce-cn/	ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步
element-plus	https://element-plus.gitee.io/#/zh-CN	Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
vant	https://vant-contrib.gitee.io/vant/v3/#/zh-CN	有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间
Naive UI	https://www.naiveui.com/zh-CN/	一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，不算太慢，有点意思
VueUse	https://vueuse.org/	基于composition组合api的常用集合，小兔仙项目会部分使用

2. 相关文档

1. Vue3 中文文档 https://vue3js.cn/docs/zh/
2. Vue3 设计理念 https://vue3js.cn/vue-composition/

3. 了解框架优点特点

1. 首次渲染更快
2. diff算法更快
3. 内存占用更少
4. 打包体积更小
5. 更好的Typescript支持
6. Composition API 组合API

总结：

• 前端学习vue3是必须的，学习vue3主要学习组合API的使用。

02-vue3开发环境

掌握：使用vue-cli完成项目创建知道初始化代码含义

大致步骤：

• 创建项目
• 默认代码

1. 创建项目

2. 默认代码

// 1. 导入一个创建App的函数
import {
    createApp } from 'vue'
// 2. 导入根组件
import App from './App.vue'
// 3. 根据根组件创建vue应用实例，挂载到html的app元素上
createApp(App).mount('#app')

其他发现：

• vue3的组件组件根标签不再是强制，支持代码片段。

总结：

• createApp 创建vue应用实例，组件支持代码片段代码

03-vue3组合API介绍

知道：什么是选项API什么是组合API，对比它们之间的代码组织特点

大致内容：

• 选项API与组合API
• 它们组织代码特点

具体落地：

1. 选项API，data 选项写数据，methods 选项写逻辑，…

   • 代码分散，一个功能会拆分在各个选项中，不利于维护不利于复用

2. 组合API，数据、逻辑和其他都在setup内写

   • 代码集中，一个功能可以组织在一起，利于维护，可抽离可复用

总结：

• data methods 是选项API，写在 setup 里的就是组合API
• 如果你使用了vue3那么使用组合API一定是不错的选择。

04-vue3组合API体验

体验：组合API实现couter和显示隐藏

大致步骤：

• 使用选项API实现
• 使用组合API实现
• 抽离复用逻辑

1. 选项API实现

<template>
  <img alt="Vue logo" src="./assets/logo.png" v-show="showImg" />
  <hr />
  计数器：{
   {
    count }}
  <button @click="increment">累加</button>
  <hr />
  <button @click="toggle">显示隐藏图片</button>
</template>

<script>
// 1.选项API实现
export default {
   
  name: 'App',
  data() {
   
    return {
   
      count: 0,
      showImg: true
    }
  },
  methods: {
   
    toggle() {
   
      this.showImg = !this.showImg
    },
    increment() {
   
      this.count++
    }
  }
}
</script>

<style>
#app {
   
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 组合API实现

<template>
  <img alt="Vue logo" src="./assets/logo.png" v-show="show" />
  <hr />
  计数器：{
   {
    count }}
  <button @click="increment">累加</button>
  <hr />
  <button @click="toggle">显示隐藏图片</button>
</template>

<script>
// 2.组合API实现
import {
    ref } from 'vue'
export default {
   
  name: 'App',
  setup() {
   
    // 显示隐藏
    const show = ref(true)
    const toggle = () => {
   
      show.value = !show.value
    }
    // 计数器
    const count = ref(0)
    const increment = () => {
   
      count.value++
    }
    return {
    show, toggle, count, increment }
  }
}
</script>

<style>
#app {
   
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3. 复用逻辑

<template>
  <button @click="toggle">显示隐藏图片</button>
  <hr />
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器：{
   {
    count }} <button @click="increment">累加</button>
  <hr />
  计数器：{
   {
    count1 }} <button @click="increment1">累加</button>
</template>

<script>
// 2.组合API实现
import {
    ref } from 'vue'
// 逻辑抽离
const counters = () => {
   
  const count = ref(0)
  const increment = () => {
   
    count.value++
  }
  return {
    count, increment }
}
export default {
   
  name: 'App',
  setup() {
   
    // 显示隐藏
    const show = ref(true)
    const toggle = () => {
   
      show.value = !show.value
    }
    // 计数器
    const {
    count, increment } = counters()
    const {
    count: count1, increment: increment1 } = counters()
    return {
    show, toggle, count, increment, count1, increment1 }
  }
}
</script>

<style>
#app {
   
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

总结：

• 体会组合API对逻辑复用和代码维护支撑，将来在项目中我们会有实践。

05-组合API-setup函数

掌握：setup使用和它的执行时机。

大致内容：

• setup的基本用法
• 确定它的执行时机

具体落地：

• setup是一个新的配置选项，它是一个函数，该函数是组合API的入口函数。
• setup函数只会在组件初始化执行一次，且在beforeCreate生命周期函数之前执行。

<template>