新手学Vue3(一)前置条件和总览

638 阅读5分钟

开场白

刚推出来Vue3的时候,知乎有人问,先学vue2还是vue3?有说先学 vue2 好找工作,企业还得没开始用vue3呢。有说要先学vue3,vue2就不用学了。

那时我就说:学新不学旧,当然是学 vue3 了,企业早晚都会换成 vue3 的,学 vue2 做什么,维护老项目吗?

现在应该不会有异议了吧,想学的抓紧时间上车了,本系列包教包会。

这里会以官网为基础,加上个人的理解,从嘎嘎新的新手的角度出发,详细介绍vue3的各种知识和实用技巧,尤其是入门部分。

vue3 的官网:cn.vuejs.org/

vue3 是完全开源的,所以必须先介绍其官网,一切以官网为准。

前置条件

学习vue3必须具备一些基础知识,否则看代码会看的晕晕乎乎的。

  • js,包括ES6
  • html
  • css
  • node.js,简单知道即可。
  • 配置环境,能配置上即可。

js

vue3 是基于 js 开发的,所以掌握 js 是基础中的基础,如果你只会一些简单的 js 那么是不够的,如何判断自己的js 知识够不够用呢?很简单,看看下面这几个知识点是否熟悉:

  • import、export (组件、代码的导入导出)
  • const、let (代替 var)
  • () => {} (函数)
  • ...foo (解构方式)
  • class (js的类,ref、computed等都是用 class 实现的)
  • Proxy (代理,reactive 等用 Proxy 实现的)
  • Promise、await、async (异步,避免回调地狱)
  • Typescript (这个也需要了解一下,vue3内部代码都采用了TS,一些项目也采用了TS,不会的话,看项目代码会有点吃力)

以上这几个会频繁出现在vue3的代码里面,不熟悉的话,建议尽快补上ES6的相关知识。

html

了解一些基础知识,HTML5有所了解即可。

css

css简单了解一下即可,当然如果精通那就更好了。不会css可以用UI库来凑。我总是固执的认为,想弄好css需要艺术细胞,有ps的图层概念。

总览

vue 是什么?下面是来至于官网的介绍:

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

我个人理解,vue 其实只做了两件事情:(如果不对请多多批评)

  1. 使用单向数据流实现了数据和 dom双向绑定,附赠响应性功能。
  2. 可以使用组件的方式组织、管理和加载代码(html、js、css)。
  3. 用 hooks 复用 js 代码。(这个不算)
  4. composition API 的方式组合代码 (vue3新增,更好的服务于 1 和 2 )

vue的各种语法糖、各种API都是围绕这两个功能展开的。
状态、路由、UI库、访问后端的API等,都采用插件的方式加到 vue 里面,而 vue 只需要做好核心功能。

Vue 是一个框架,也是一个生态

啥是框架呢?个人理解就是先规划好格子,然后我们根据自己的需求往格子里的放需要的代码。
框架不能帮高手做出来高效的项目,但是能帮助新手更舒服的写代码。

以前vue2(OptionAPI)规划的格子虽然很方便,但是不够灵活,做简单项目还好,做复杂项目的时候就有些束缚感,所以vue3推出了CompositionAPI,增加灵活性。(灵活和规整是对立的,越是灵活,就越不容易规整,所以出现了所谓的心智负担

vue3 可以实现很多功能:

  • 无需构建步骤,渐进式增强静态的 HTML (CDN方式,像jQuery那样
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA) (工程化的方式开发
  • 全栈 / 服务端渲染 (SSR) (应对SEO
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

常见的是单页应用,也就是工程化的方式来开发项目。本系列也是介绍这方面的内容,因为其他的不太了解。

个人感觉,vue 最适合实现低代码,vue + UI库,解决了低代码的一个大难题,打下坚实地基,稍微加点代码就是一个很酷的低代码。

开发方式

现在vue的项目 99.9% 都是工程化的方式,也就是官网里说的 单页应用 (Single-Page application,缩写为 SPA),

不过其实也是支持像 jQuery 那样直接导入到网页里的开发方式,只是现在很少了。

对于新手来说,直接去了解 SPA 的方式,可能会有点懵逼,当然如果你有后端基础的话,看着就会比较熟悉了。不过我们还是先从简单的开始,我们先看看CDN的方式,这样可以快速了解Vue的魅力和一些基础原理。

API 风格

个人推荐 composition API。官网提供了两种API的使用方式,不过个人精力有限,这里只介绍composition API 的方式。

这只是开始,后续会以 CDN方式作为入门,然后过渡到SPA的方式,帮助大家平稳过渡。最后祝大家五一节快乐,玩的开心,休息的好。

(如果心急的话,可以看看我的其他文章:juejin.cn/column/6963…