跳至主要內容

Vue3概述

Guitar大约 5 分钟

Vue3 概述

Vue3 官网地址：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue3 于2020年9月18日发布里程碑版，命名为 “海贼王”（One Piece）。

image-20230709082009516
image-20230709082009516
image-20230709083212969
image-20230709083212969

与 Vue2 相比，Vue3 在捆绑包大小（通过tree shaking可轻 41%）、初始渲染（快 55%）、更新（快 133%）和内存使用（少 54%）方面都有了显著的性能改进。

Vue3 做出的核心改动：

  1. 最核心的虚拟 DOM 算法进行了重写。

  2. 支持 tree shaking。

    tree shaking（树摇机制） 是 ES6 在前端的性能优化中推出的新机制。tree shaking 就是当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉。

  3. 最核心的响应式由 Object.defineProperty 修改为 Proxy 实现。

    Proxy 是 ES6 推出的，专门创建代理对象的一个类。能够实现对象的深代理（即子对象也是代理的），而且支持代理完备的属性操作（属性的增删改查都可以代理）。

  4. 更好地支持 TypeScript

Vue3 的新特性：

  1. 新的生命周期钩子

    image-20230709083446794
    image-20230709083446794

  2. 键盘事件不再支持 keyCode。

    例如：v-on:keyup.enter 支持，v-on:keyup.13 不支持

  3. 组合式 API（Composition API）

  4. 新增了一些内置组件。

    image-20230709083532017
    image-20230709083532017

  5. date 配置项必须是一个函数

Vue3 工程的创建

Vue2 工程的创建基于 vue-cli 这个脚手架。

Vue3 工程的创建可以基于 vue-cli，也可以基于更高性能的 creat-vue 脚手架。

vue-cli 基于 webpack 编写的脚手架；creat-vue 是基于 vite 编写的脚手架。

webpack 和 vite 都是前端构建工具。vite 是尤雨溪团队开发的，服务器启动速度非常快，然后代码修改之后，更新非常快。vite 官网： https://vitejs.cn。

Vue2/3 --> vue-cli --> webpack

vue3 --> creat-vue --> vite

常见的前端构建工具有：

image-20230709085103606
image-20230709085103606

使用 vue-cli 创建

创建 Vue3 版本的工程，要求 vue-cli 最低版本 4.5.0。

# 查看 vue-cli 版本
vue --version
# 更新 vue-cli
npm install -g @vue-cli

通过命令行创建vue3工程：

# 和创建vue2工程的命令一样，在出现的界面选择vue3即可
# 先切换至存放工程的目录
vue creat 工程的目录名

在工程的根目录下启动：

npm run serve

目录结构和文件布局同 vue2（都是 vue-cli创建的）。

image-20230709090200978
image-20230709090200978

程序仍然自动嵌入 main.js 至 index.html，main.js 仍是整个工程的入口。

使用 creat-vue 创建

creat-vue 基于 vite，更快速，是建议使用的 Vue3 工程创建方式。

安装并 creat-vue 并创建 Vue3 工程：

# 先切换到存放工程的目录下
npm init vue@latest

执行时，如果检测到没有安装 create-vue 脚手架时会先安装脚手架。如果检测到已经安装过脚手架，则直接创建项目。

在命令行窗口输入工程目录名即可。

在工程的根目录下启动：

# 安装项目依赖
npm install
# 启动（不再是serve了）
npm run dev

creat-vue 创建的 Vue3 工程结构有所不同：

image-20230709085623753
image-20230709085623753

  1. index.html 不再放在 public 目录下了。

  2. 程序入口为 index.html了，直接在 index.html 中使用 <script> 引入 main.js，不再自动嵌入了。

    image-20230709090143970
    image-20230709090143970

  3. 工程配置文件不再是 vue.config.js，而是 vite.config.js。

    配置代理等稍有不同了。vite.config.js 配置参考：https://cn.vitejs.dev/config。

Vue3 工程的不同

  1. 默认端口号不再是8080，而是5173

  2. 工程的默认界面也不一样了。

  3. main.js 不同了

    image-20230709090512012
    image-20230709090512012

  4. 初始的 App.vue 也不一样了

Vue3 组件开发的不同

  1. <template> 下可以有多个根标签了

    image-20230709093208188
    image-20230709093208188

  2. vue3 中可以编写 vue2 语法，向下兼容的。但是不建议在Vue3中使用Vue2，更不建议混用。

  3. setup 是 Vue3 中新增的配置项，是一个函数。

Vue3 组件实例的 this 不再是当前vc对象，而是 proxy 对象。这个proxy 对象代理了所有的属性（data、computed）、方法（methods）等。

image-20230709101619691
image-20230709101619691

setup 初解

setup 是 Vue3 组件实例化之前调用的，用来获取如 data、methods 等配置信息。

组件中所用到的 data、methods、computed、watch、生命周期钩子....等，都要配置到 setup 中

export default {
    // 如果你把data、methods、computed...还是配置到这里的话，表示你还是使用了vue2的语法规则。
    // 如果你使用了vue3，建议不要在出现vue2的语法，不建议vue3 + vue2混合使用。
    
   	setup(){
        // 在这里配置 data、methods等
        
        return ...
    }
}

setup需要有一个返回值，可以返回一个对象，也可以返回一个渲染函数。

  1. 返回对象的 setup

    setup(){
    let name = '张三'
    let age = 20
    
    function sayHi(a, b, event){
        alert(a + ',' + b)
        alert(event.target.innerText)
    }
    
    return {name, age, sayHi}
}

    返回对象的 值属性 会作为 data 中的数据；函数属性 会作为 methods 中的方法（可以通过this访问其他属性）。

  2. 返回渲染函数的 setup（不常用）

    // 需要先导入一个渲染函数
import {h} from 'vue'

setup(){
    // 返回一个渲染函数
    return function(){
        // h('标签名', '标签体')
        return h('h1', 'welcome to study vue3!!!')
    }
    // 简写
    // return () => h('h2', '欢迎学习vue3!!!')
}

setup 语法糖

使用纯组合式API进行开发时，组件的全部配置都写在了 setup 函数中，Vue3 提供了关于 Vue3 的语法糖，可以简化使用纯组合式API进行的开发。

<scrpit>
    import ...
    export default {
        name : "...",
        setup(){
    		
    		
    		return {...}
        }
    }
</scrpit>

<!--语法糖形式：直接将函数体写在 scrpit 标签中-->
<scrpit setup>
    import ...
    // setup函数体
    
</scrpit>
<!-- 定义的一级属性、函数都会自动封装返回，不要写 return -->
Copyright ©2024-present Guitar