# vue3.x-vite-template

**Repository Path**: zlluGitHub/vue3.x-vite-template

## Basic Information

- **Project Name**: vue3.x-vite-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-06
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: zll
 * @Date: 2022-10-27 09:54:56
 * @FilePath: \dataspace3.0-webd:\MyGitHub\木鱼聚集地\gather-spot\README.md
 * @LastEditors: zll
 * @LastEditTime: 2022-10-27 10:15:00
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
- [Vue3.0 基础知识点总结](http://zhenglinglu.cn/pages/6cadb1/)

## 2.x与 3.0的对照
 ```
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
```
## main.js
```js
// 配置全局变量 页面中使用 inject 接收
app.provide('global', {
  $setStorage: setStorage,
  $getStorage: getStorage,
  $removeStorage: removeStorage,
  $clearStorage: clearStorage,
  $relativeTime: relativeTime,
  $store: store,
  $axios: axios,
  $qs: qs,
  $mitt: mitt(),
  $url: import.meta.env.VITE_APP_BASE_API
})
```
## setup 钩子
下面这些生命周期注册方法只能用在 setup 钩子中使用
```js
import { onMounted, onUpdated, onBeforeUnmount, reactive, inject, getCurrentInstance, nextTick} from "vue";
const { proxy } = getCurrentInstance();
const global = inject("global");

export default {
  // 1: setup显得冗长, 可以自己动手做一些插件来优化
  // 2: 本身更加明确意图
  // 3: 需要树立工程师的正确代码意识
  // 4: 能力不足可能会写出更差的代码
  // 作者说: 提升上界的收益远远大于降低下界的损失。值得深思, 前端需要提高门槛
  // 5: 调用时机: 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
  // 6: 这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。
  // 7: 原则上生命周期里面不会放具体的逻辑,哪怕只有一句赋值一个三元都不可放, 这也正好符合当前的工程模式

  // 讨论: 有多少种方式, 可以判断出某个函数 当前处于哪个函数?
  //       比如有多层嵌套的组件是否有影响
  setup() {
    onMounted(() => {
      console.log("is mounted!");
    });
    onUpdated(() => {
      console.log("is onUpdated!");
    });
    onBeforeUnmount(() => {
      console.log("is onBeforeUnmount!");
    });
    const obj = reactive({
      count: 1
    });
    function add() {
      obj.count++;
    }
    return {
      obj,
      add
    };
  }
};
```