Vue3

Vue3的优势

更容易维护：

组合式API
更好的TS支持

更快的速度：

重写diff算法
模版编译优化
更高效的组件初始化

更小的体积：

良好的ThreeShking
按需引入

更有的数响应：

Proxy

创建Vue3项目

1.前提环境条件 已安装 16.0 或更高版本的 Node.js node -V 查看node版本号

2.创建一个Vue应用 npm init vue@latest 这一指令将会安装并执行 create-vue

之后安装依赖npm i ,就能运行了

项目关键文件

1.vite.config.js - 项目的配置文件 基于vite的配置

2.package.json - 项目包文件 核心依赖项变成了 Vue3.x和 vite

3.main.js - 入口文件 createApp函数创建应用实例

4.app.vue - 根组件 SFC单文件组件 script-template -style

变化一:脚本script和模板template顺序调整
变化二:模板template不再要求唯一根元素
变化三:脚本script添加setup标识支持组合式API

5.index.hlml - 单页入口 提供id为app的挂载点

入口文件解释

import'./assets/main.css

// new Vue()创建一个应用实例 =>createApp()
//createRouter()createStore()
//将创建实例进行了封装，保证每个实例的独立封闭性
import {createApp }from 'vueimport App from"./App.vue

// mount 设置挂载点 #app(id为app的盒子)
createApp(App).mount('#app')

插件

volar-目前（2024/9/28）叫Vue - Official用于Vue3

vetur插件用于Vue2

组合式API-setup选项

setup选项语法和执行时机

语法：

<script>
export default {
	setup () {},
	beforeCreate () {}
<script>

执行时机（在beforCreate这个生命周期函数前就执行了）：

setup语法特点：（需要导出和return，数据多了会很麻烦）

<script>  
export default {
  setup() {
    const msg = 'Vue3学习'
    const showMsg = () => {
      console.log(msg)
    }
    // 定义好的数据需要一个一个return,非常麻烦
    return {
      msg,
      showMsg
    }
  }
}
</script>

<template>
  <div>{{ msg }}</div>
  <button @click="showMsg">展示</button>
</template>

`<script setup>` 语法糖

所以用到了

Vue3 笔记