vue3内容介绍

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

Vue3内容：
1. 核心：ref、reactive、computed、watch、生命周期……
2. 常用：hooks、自定义ref、路由、pinia、mitt……
3. 面试：组件通信、响应式相关API……

简介

Vue是一套用于构建用户界面的前端框架。它为构建用户界面提供了一整套的解决方案(俗称Vue全家桶)：

  • vue (核心库)
  • vue-router (路由方案)
  • vuex (状态管理方案)
  • vue 组件库 (快速搭建页面U效果的方案)

以及辅助vue项目开发的一系列工具:

  • vue-cli (npm 全局包: 一键生成工程化的vue 项目 - 基于webpack、大而全)
  • vite (npm 全局包: 一键生成工程化的vue项目 – 小而巧)
  • vue-devtools (浏览器插件: 辅助调试的工具)
  • vetur (vscode插件: 提供语法高亮和智能提示)

vue3

版本更新

2020.9.18，Vue.js发布 3.0版本，代号：One Piece(海贼王)（尤雨溪老二次元了XD）
官方发布地址：Release v3.0.0 One Piece·vuejs/core

vue3.x中兼容vue2.x中绝大多数的API与特性，同时，新增了3.x所特有的功能、并废弃了某些2.x中的旧功能:

  • 新增的功能例如:
    组合式API、多根节点组件、更好的TypeScript支持等

  • 废弃的旧功能如下︰
    过滤器、不再支持$on，$off和$once实例方法等

详细的变更信息，请参考官方文档给出的迁移指南: https://v3-migration.vuejs.org/zh/

基本使用

  1. 编码语言：JS、TS

    实际工作中，Vue3往往搭配着TS一起使用

  2. 代码风格：组合式API(最新的)、选项式API(传统的)

    官方明确表示，推荐使用组合式API

  3. 简写形式：setup语法糖
  • 核心：
    ref、reactive、computed、watch、生命周期……
  • 常用：
    hooks、自定义ref、路由、pinia、mitt……
  • 面试：
    组件通信、响应式相关API……

升级

  • 组合式API —— setup语法糖 —— 弱化this

    因为vue3里面，在setup语法糖中几乎不去碰this，所以完全可以写箭头函数(箭头函数的this指向定义箭头函数时所在上下文的this，而普通函数this指向取决于函数的调用上下文)

  • 子组件的标签

    1. 可以写多个(vue2只能写一个)
    2. 写法：<Person/>，支持自闭合标签的写法，也支持双标签写法

      vue2是双标签写法<Person></Person>

  • 根标签
    vue3里面，根标签不是必须的，在template标签里可以有多个子级标签

  • setup语法糖底层弄了async
    可以直接在<scrpit setup></scrpit>中写await：let xxx = await axios.get('xxxx')

    但是在组件中使用了异步任务，组件内容就无法正常显示了，必须在父组件中，包裹一个Suspense元素

vue-devtools调试工具

vue-devtools有 vue2.x 和 vue3.x(带Beta标记的版本) 两个版本，不能交叉使用!
如何安装：掘金、CSDN

但是，vite似乎集成了vue-devtools，不需要在浏览器安装插件，在创建项目的时候配置上 该调试工具即可使用。