10.Vue3.0初识

自白
161 阅读3分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

1.0 Vue3概括

1.1 Vue3发展

2020年09月18日,正式发布了vue3.0版本,当时刚开发时周边生态并不支持,还处于官网状态

经过了接近两年的发展,现在主流得组件库都已发布了支持Vue3的版本,其余生态也在不断完善中,

  • vant 3.0 又有赞团队开发的移动端组件库已支持Vue3.0版本
  • element-plus 基于Vue3.0版本的桌面端组件库
  • Vuetify 由社区根据ant design开发

1.2 Vue3优势

  • 响应式优化 Proxy()替代了defineProperty(),监听对象时不需要再深度遍历,Proxy()即可劫持整个对象
  • 性能提升 相较于Vue2.x提升1.5倍左右
  • 体积更小 按需编译体积对比Vue2.x更小
  • 类型推断 更好的支持ts,ts即typescript相当于js+类型推断,是前端发展的趋势
  • 高级给予 暴露了更底层的API以及提供更先进的内置组件
  • 组合API(composition api) 能够更好的组织,封装,复用逻辑

对ts的更友好的支持,可以让更多的大型项目使用Vue3.0,同时带来的性能优势也是很明显的,未来将会有越来越多的企业将项目升级到Vue3.0

2.0 vite初识

2.1 vite是什么?

我们之前学习过vue-cli是一款脚手架,用于创建vue项目的脚手架工具,vite也是一款脚手架工具,它与vue-cli不同的是

  • vite更轻量(打包与热更新速度更快)
  • 相对于vue-cli它默认安装的插件非常少,随着开发过程,需要自己额外配置,所以现阶段学习语法我们会优先使用vite

2.2 vite的使用

  • 打开控制台,创建项目npm init vite-app 项目名或者yarn create vite-app 项目名
  • 安装依赖npm i或yarn
  • 启动项目npm run dev或yarn dev

3.0 创建vue3.0项目

3.1 创建步骤

  1. 打开控制台,输入创建指令
yarn create vite-app vue3-study

image.png 2. 创建完成,开始安装依赖

cd vue3-study
yarn
  1. 启动项目
yarn dev

可以看到控制台打印 image.png 点击进入页面效果如图 image.png

3.2 目录结构介绍

当前文件目录结构对比vue2的目录结构有些许改动,但是大致相同,相必大家也很熟悉了,从目录就可以发现vite创建的项目确实轻量很多 image.png

3.3 清理无用结构

  • src目录下除了main.js入口文件与App.vue其余全部删除
  • App.vue文件结构清理重新创建一个空的vue结构,模板上写上根组件

image.png

  • 来我们将视线放在main.js中,现在main.js主要做这么几件事
    1. 从vue中导入createApp函数
    2. 创建一个根组件 App.vue 导入至main
    3. 使用createApp创建应用实例
    4. 将应用挂载到#app容器中(现在不用$mount了直接.mount即可)
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
  • 拓展功能将来都是在app上进行 短短四行代码应用创建完毕,效果如图 image.png

4.0 了解选项API与组合API

Vue可以按照两种不同的书写风格书写 分别是选项API与组合API

4.1 啥是选项API写法?

选项API写法也就是Options API

  • 我们在Vue2中的写法就是选项API
    • 代码风格: data选项写数据,method选项写函数,一个逻辑分散在不同的位置
    • 经常写vue2的同学应该就能感受到,对一个方法维护的时候,经常要control+F查找来查找去修改,不是很利于代码维护与阅读
  • 优势: 易于学习与使用,写代码位置已约定好
  • 缺点: 较难维护与阅读
  • 补充: 虽然提供mixins用来封装逻辑 可能会出现数据来源不清楚,命名冲突等

4.2 啥是组合API写法?

组合API也就是Compositon API

  • 我们在Vue3中将会采用组合API的写法
    • 代码风格 一个功能逻辑的代码组织在一起,即数据处理函数等写在一起
  • 优势: 逻辑复杂的情况下,多个功能模块写在一起,便于阅读维护
  • 缺点: 有一定学习成本以及需要有较好的代码组织能力与拆分逻辑能力
  • 补充: Vue3同时支持两种写法,但是更建议各位学习组合APi的写法风格

来看看我的其他章节吧,正在长更中

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【02.了解并理解Vue指令以及虚拟Dom】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【03.vue基本api入门】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【04.从vue组件通讯到eventBus以及vuex(附mock接口与axios简单实践)】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【05.vue生命周期】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【06.ref与ref与nextTick使用】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【07.vue动态组件,组件缓存,组件插槽,子组件直接修改props,自定义指令看这一篇就够了】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【08.Vue路由基础】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【09.Vue路由进阶】 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝