Giter Club home page Giter Club logo

vuejs-3-examples's Introduction

Vue.js 3.0 tutorials

为什么学习 Vue.js 3.0？

作为前端的主力框架，Vue.js 因为上手成本低的特点，有着很大的市场占有率，很多的公司都在大面积使用 Vue.js 作为主要的技术栈，再往后升级 Vue.js 3.0 只是早晚的事情，而且 Vue.js 3.0 确实有很多突破性的改进（具体的改进和变化我们待会也会详细介绍），所以对于我们前端开发者而言，掌握 Vue.js 3.0 也是一个必要的目标。

Vue.js 3.0 已经发布有一段时间了，而且在此之前也经历过一个很长的测试阶段，所以对于 Vue.js 3.0 我相信大多数「圈内人士」都或多或少的了解了一些。例如：新的 Composition APIs、响应式数据底层实现改由 Proxy 实现、重写了 Virtual DOM、性能上的变化等等。

具体我们开发者能够感知到的变化，我们可以从官方文档中找到一个非常完整详细的介绍，其中绝大多数的变化在我们之前的课程中我也有过详细的介绍。

今天晚上我并不打算一个一个地跟你去过一遍这些新的特性，我是希望能够更多的跟你分享一些我的理解和观点，因为对于已经入行的同学来说，很多时候被困扰的并不用法上的问题，而是设计和原理上的疑惑。

具体来说，我把今天的要分享的内容归纳为以下这几个问题：

  1. Vue.js 3.0 为什么会推出一套全新的 Composition APIs？这套全新的 API 又有哪些明显的优势？
  2. Composition APIs 究竟应该怎样使用才能发挥出它应有的价值？
  3. Vue.js 3.0 目前在实际场景下的使用情况如何？敢不敢现在升级？
  4. 周边生态目前又是什么样的状态？

如果时间允许的情况下，我会：

  1. 剖析一下 Vue.js 3.0 中响应式数据核心的实现原理和源码
  2. 聊一聊 Vue.js 3.0 中的几个实验性的语法糖
  3. 拆解一下 Vue.js 3.0 同期发布的 Vite

不知道这些问题有没有戳中你，如果你也有类似的疑问，一定跟我们一起看下去，彻底搞懂这些问题。

Composition APIs

Composition APIs 的起因

话不多说，首先来看第一个话题：Vue.js 3.0 为什么会推出一套全新的 Composition APIs？

想要彻底理解 Vue.js 3.0 为什么搞一套 Composition APIs，核心你得先能够体会到 Vue.js 中存在的一些「小问题」。（因为一套替代方案的核心价值肯定在于它解决了之前的某种问题）。

大家对 Vue.js 3.0 熟不熟我不好确定，但是大家之前应该都或多或少的用过 Vue.js 2.x，在 Vue.js 2.x 中，框架的规则性或者叫规矩感非常强。

可能这么说不好理解，我举个例子，比如我们在一个页面组件中要呈现一些从服务器端获取的数据，我们需要先在组件的 data 中添加一个成员，往模板上暴露数据，然后要到组件的生命周期钩子函数中添加获取数据的逻辑代码，如果取回来的数据在呈现的时候还需要经过过滤筛选，那我们还需要在组件的 computed 属性中添加对应的计算属性。

整个过程看似很和谐，这也是为什么说 Vue.js 上手非常友好的原因，毕竟这个过程中框架提供了很完善的规则，我们只需要照着文档一步一步来就行。

这里我也准备了一个小案例，....

这里我们要去添加筛选界面上所现实的 Todos 列表的功能。

我们需要先 xxx，再 xxx ...

那大家能意识到这样做存在的问题么？

同一个业务功能相关的代码分散在各个位置，框架的规则是按照技术特性划分，而不是按照业务功能划分

*Options APIs（Classic Usage）

Vue.js 3.0 仍然支持 Vue.js 2.x Options APIs 典型用法！

Composition APIs 的基本用法

Vue.js 3.0 全新引入一套新的 API 调用风格，类函数式编程！

Composition APIs 封装 Hooks

如果只是目前这么去使用 Composition APIs，那只是换汤不换药，没什么意义。。。

单纯的使用 Composition APIs 并没有太明显的优势，Composition APIs 核心的优势在于 Composition（组合）！

hooks 库：https://github.com/u3u/vue-hooks

封装后的 Todos 案例

发挥 Composition APIs 的价值

Composition APIs 的优势总结

  • 逻辑组合，更强大的逻辑抽象能力，同时更好的逻辑复用
  • 没有 this，没烦恼，再也不用纠结 this 上到底有什么了
  • 更好的类型推导能力（TypeScript）
  • 更友好的 Tree-shaking 支持（渐进式体验）
  • 更大的代码压缩空间

Vue.js 3.0 基础设施

基于 Webpack 构建

基于 Vue CLI 构建

基于 Vite 构建

参考： https://github.com/zce/vite-essentials

周边库生态

官方库

社区库

ENCORE 加餐

Reactivity

SFC Sugers

Vite 原理与实践

参考： https://github.com/zce/vite-essentials

Some examples of Vue.js 3.0.

https://github.com/zce/vite-essentials

vuejs-3-examples's People

Contributors

renovate-bot avatar zce avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

cloveryuan zlsoftdq jianmofeng wwwk

vuejs-3-examples's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

  • WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): replace dependency babel-eslint with @babel/eslint-parser 7.11.0
  • chore(deps): update vue-cli monorepo to v4.5.19 (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-pwa, @vue/cli-plugin-router, @vue/cli-plugin-typescript, @vue/cli-plugin-vuex, @vue/cli-service)
  • chore(deps): update dependency @vue/eslint-config-standard to v6.1.0
  • chore(deps): update dependency vue-loader to v16.8.3
  • fix(deps): update dependency vue-router to v4.2.5
  • fix(deps): update dependency vuex to v4.1.0
  • chore(deps): update dependency @vue/eslint-config-standard to v8
  • chore(deps): update dependency @vue/eslint-config-typescript to v12
  • chore(deps): update dependency css-loader to v6
  • chore(deps): update dependency eslint to v8
  • chore(deps): update dependency eslint-plugin-promise to v6
  • chore(deps): update dependency eslint-plugin-vue to v9
  • chore(deps): update dependency lint-staged to v15
  • chore(deps): update dependency sass-loader to v13
  • chore(deps): update dependency style-loader to v3
  • chore(deps): update dependency typescript to v5
  • chore(deps): update dependency vue-loader to v17
  • chore(deps): update dependency webpack-cli to v5
  • chore(deps): update dependency webpack-dev-server to v4
  • chore(deps): update typescript-eslint monorepo to v6 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • chore(deps): update vue-cli monorepo to v5 (major) (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-pwa, @vue/cli-plugin-router, @vue/cli-plugin-typescript, @vue/cli-plugin-vuex, @vue/cli-service)
  • 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm
00-tree-shaking/package.json
01-composition-apis/package.json
02-webpack-based/package.json
  • todomvc-app-css 2.3.0
  • vue 3.0.4
  • @vue/compiler-sfc 3.0.4
  • css-loader 5.0.1
  • html-webpack-plugin 4.5.0
  • style-loader 2.0.0
  • vue-loader 16.1.2
  • webpack 5.11.0
  • webpack-cli 4.2.0
  • webpack-dev-server 3.11.0
03-vue-cli-based/package.json
  • core-js 3.8.1
  • todomvc-app-css 2.3.0
  • vue 3.0.4
  • @vue/cli-plugin-babel 4.5.9
  • @vue/cli-plugin-eslint 4.5.9
  • @vue/cli-service 4.5.9
  • @vue/compiler-sfc 3.0.4
  • babel-eslint 10.1.0
  • eslint 7.16.0
  • eslint-plugin-vue 7.3.0
04-vite-based/package.json
  • todomvc-app-css 2.3.0
  • vue 3.0.4
  • vite 1.0.0-rc.13
  • @vue/compiler-sfc 3.0.4
05-official-libraries/package.json
  • core-js 3.8.1
  • vue 3.0.4
  • vue-router 4.0.1
  • vuex 4.0.0-rc.2
  • @typescript-eslint/eslint-plugin 4.11.0
  • @typescript-eslint/parser 4.11.0
  • @vue/cli-plugin-babel 4.5.9
  • @vue/cli-plugin-eslint 4.5.9
  • @vue/cli-plugin-pwa 4.5.9
  • @vue/cli-plugin-router 4.5.9
  • @vue/cli-plugin-typescript 4.5.9
  • @vue/cli-plugin-vuex 4.5.9
  • @vue/cli-service 4.5.9
  • @vue/compiler-sfc 3.0.4
  • @vue/eslint-config-standard 6.0.0
  • @vue/eslint-config-typescript 7.0.0
  • eslint 7.16.0
  • eslint-plugin-import 2.22.1
  • eslint-plugin-node 11.1.0
  • eslint-plugin-promise 4.2.1
  • eslint-plugin-standard 5.0.0
  • eslint-plugin-vue 7.3.0
  • lint-staged 10.5.3
  • sass 1.30.0
  • sass-loader 10.1.0
  • typescript 4.1.3
06-community-libraries/package.json
  • element-plus 1.0.1-beta.14
  • vue 3.0.4
  • vite 1.0.0-rc.13
  • @vue/compiler-sfc 3.0.4
  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.