01-vue3全家桶介绍

一、Vue3全家桶介绍

1，介绍

在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。

• 它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
• 在vue3刚刚发布时，很多人也是跃跃欲试，想要尝试vue3的各种新特性。
• 但是事实上在刚刚发布的时候我们使用vue3来写demo练习是没有问题的，真正在实际业务项目中使用vue3还需要一个相对的过程；
• 包括vue3的进一步稳定、包括社区更多vue3相关的插件、组件库的支持和完善。

那么现在是否是学习vue3的时间呢？

• 答案是肯定的
• 首先vue3在经过一系列的更新和维护后，已经是趋于稳定，并且在之前尤雨溪也宣布在将vue3作为Vue CLI的默认版本了。
• 目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
• 并且在面试的时候，几乎都会问到各种各样Vue3、Vite2工具相关的问题。

两个时间：2020年9月（Vue3、TS）/ 2022年春节（Vue3正式发布）

2，技术栈官网

• 技术栈：Vue3+VueRouter4+Pinia2+Vant3/ElementPlus

• 1、Vue3官网：https://vuejs.org/

• 2、VueRouter(V4)：https://router.vuejs.org/

• 3、Pinia(V2)：https://pinia.vuejs.org/

• 4、Vite构建工具：https://vitejs.dev/

• 5、ElementPlus：https://element-plus.gitee.io/zh-CN/

• 6、Vant(v3)：https://vant-contrib.gitee.io/vant/#/zh-CN

二、搭建环境

1，搭建环境的两种方式

• @vue/cli
• vite（推荐）

我们直接使用vite搭建项目，步骤如下：

  第一步：yarn create vite vue3-admin --template vue
  第二步：cd vue3-admin
  第三步：yarn
  第四步：yarn dev
  
  安装yarn: npm i yarn -g

2，目录分析

• vite.config.js 是Vite官方配置文件，各种配置参考Vite官网。
• tsconfig.json 是TypeScript的配置文件
• index.html 是SPA挂载的根页面
• xxx.d.ts 是TypeScript的声明文件
• main.ts 是入口文件
• App.vue 是根组件（SFC单文件组织）

3，VScode编辑器插件安装

• 在VScode中支持SFC高亮和TS检测：安装 volar插件，支持ts检测

4，在Vue3中关于SFC的若干变化

• 支持多个style标签、支持多个script标签、template支持多个根节点
• 在script标签中通过设置lang='ts'表示是否启用ts
• 在style标签中，可以使用 v-bind指令。

三、四种语法范式

1，四种语法范式

• 选项式写法：完成支持Vue2写法，我们之前学习的Vue2的写法就是选项式写法
• 组合式写法：只使用setup()，把组合式API写在setup中就是组合式写法
• 选项式+组合式写法：可以使用setup()+选项式写法
• 组合式语法糖写法：在script标签上添加setup，只支持组合式写法，规避选项式写法。

选项式写法演示如下：

// Demo.vue
<template>
  <h1>选项式API写法</h1>
  <h1 v-text="num"></h1>
  <button @click="add">+1</button>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>

// App.vue
<template><Demo /></template>

<script>
import Demo from "./components/Demo.vue";

export default {
  components: {
    Demo,
  },
};
</script>

<style scoped>
</style>

组合式写法演示如下：

// Demo.vue
<template>
  <h1>组合式API写法</h1>
  <h1 v-text="num"></h1>
  <button @click="add">+1</button>
</template>

<script>
import { ref } from "vue";
// Vue3的选项写法：对Vue2范式完全兼容，可以同时使用setup和选项，也可只使用setup。
// 官方已经不推荐使用这种选项写法了。选项写法，都有对应的组合API来实现。
// 解读setup这个选项：相当于Vue2中的created()，可以理解成是组件生命周期的第一阶段；setup(props,context)，context表示上下文，为什么在setup中要有一个上下文对象，因为在setup选项中没有this。
export default {
  // 组合选项
  setup(props, context) {
    const num = ref(1);
    const add = () => {
      num.value++;
    };
    return {
      num,
      add,
    };
  },
};
</script>

// App.vue

<template><Demo /></template>

<script>
import Demo from "./components/Demo.vue";

export default {
  components: {
    Demo,
  },
};
</script>

<style scoped>
</style>

选项式+组合式写法演示如下：

// Demo.vue

<template>
  <h1>选项式+组合式API写法</h1>
  <h1 v-text="num"></h1>
  <button @click="add">+1</button>
</template>

<script>
import { ref } from "vue";
// 个人非常不推荐这种写法
export default {
  props: {
    xx: { type: String, default: "" },
  },
  // 组合选项
  setup(props, context) {
    const num = ref(1);
    return {
      num,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>

// App.vue

<template><Demo /></template>

<script>
import Demo from "./components/Demo.vue";

export default {
  components: {
    Demo,
  },
};
</script>

<style scoped>
</style>

组合式语法糖写法演示如下：

<template>
  <h1>组合式语法糖写法</h1>
  <h1 v-text="num"></h1>
  <button @click="add">+1</button>
</template>

<script setup>
// 在Vue中，怎么规避选项式写法？在<script setup>，这种在script上添加setup是Vue3组合式写法的语法糖。并且是官方推荐的语法糖
// 个人非常推荐
import { ref } from "vue";
const num = ref(10);
const add = () => {
  num.value++;
};
</script>

// App.vue

<template><Demo /></template>

<script>
import Demo from "./components/Demo.vue";

export default {
  components: {
    Demo,
  },
};
</script>

<style scoped>
</style>

2，如何选择，为什么这样选择

• 如果发Vue2项目，只能使用选项式写法
• 如果是Vue3项目，建议直接使用组合式语法糖
• 注意：对Vue开发者，要有能力在这两种（四种）写法之间灵活切换语法。

为什么这样选择，我们可以把逻辑进行封装，封装成一个个的hooks，演示代码如下：

// Demo.vue

<template>
  <h1 v-text="num"></h1>
  <button @click="sub">自减</button>
  <button @click="add">自增</button>
  <hr />

  <input type="text" v-model="task" @keyup.enter="confirm" />
  <div v-for="(item, idx) in list" :key="item.id">
    <span v-text="item.id"></span>
    <span v-text="item.task"></span>
    <button @click="delTodo(idx)">删除</button>
  </div>
</template>

<script setup>
import useCounter from "./hooks/useCounter.ts";
import useTodolist from "./hooks/useTodolist.ts";

const { num, add, sub } = useCounter();
const { task, list, confirm, delTodo } = useTodolist();
</script>

// useCounter.ts

import {
    ref
} from 'vue'

function useCounter() {
    const num = ref(100)
    const add = () => {
        num.value += 10
    }
    const sub = () => {
        num.value -= 5
    }
    return {
        num,
        add,
        sub
    }
}

export default useCounter

// useTodolist

import {
    ref,
    reactive
} from 'vue'

function useTodolist() {
    let task = ref('')
    let list = reactive([])
    let confirm = () => {
        if (task.value) {
            list.push({
                id: Date.now(),
                task: task.value
            })
            task.value = ''
        }
    }

    const delTodo = (idx) => {
        list.splice(idx, 1)
    }
    return {
        task,
        list,
        confirm,
        delTodo
    }
}

export default useTodolist

3，Vue3最重要的特性

• 开发思想的变化：Vue3通过使用组合API，可以方便地封装Hooks，分离组件中的“逻辑关注点”。
• 具体怎么实践这种思想？第一步，用组合API替换掉传统的选项写法；第二步，梳理逻辑关注点封装自定义Hooks。
• 自定义Hooks有几个需要注意的问题：自定义Hooks一定要以use*开头，自定义Hooks可以被复用，自定义Hooks不要过度与泛滥。
• 思考：组件封装 与 Hooks封装，有什么本质的区别？前者是视图结构的封装，后者是逻辑功能的封装。
• Vue3开源项目：https://github.com/pipipi-pikachu/PPTist