当前位置:首页 > 前端技术 > Vue3教程:Vue 3.0 来了,我们该做些什么?

Vue3教程:Vue 3.0 来了,我们该做些什么?

2022年08月06日 16:30:39前端技术4

推荐一下本人近期维护的开源项目

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

Spring Boot 开源电商项目(含商城端和后台管理系统)https://github.com/newbee-ltd/newbee-mall

Spring Boot + Vue3 前后端分离商城项目https://github.com/newbee-ltd/newbee-mall-vue3-app

Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统https://github.com/newbee-ltd/vue3-admin

靓仔路过,不要错过

想必 Vue3.0 发布这件事,大家都知道了。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

我也是从朋友圈的转发得知此事,博客平台、公众号、朋友圈基本都有这么一条新闻,可见 Vue3.0 的被期待程度,因为 React 16 发布的时候,我也没见大家这么追捧,让我有点震惊的是 Vue 有 130 万的使用者,这个体量真的是有点惊人。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

Vue 3.0 来了,我们该做些什么呢?

  • 学习,赶紧学习,学不动了也要学!
  • 装不知道,我是一只快乐的鸵鸟,我不知道 Vue 更新了,继续摸鱼爽歪歪。
  • 为了下半年的 KPI,冲冲冲!把手头的 Vue 项目进行版本升级和重构。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

Vue3.0 更新了啥

让我总结的话,就只有两个比较重要的更新(我目前还没有完完整整的体验过新版本,有些地方可能不够完善,希望大家多多包涵,后续会整理和分享一些实践的 demo)

一个是 Composition API,另一个是对 TypeScript 的全面支持。

团队还会出一个 Vue 2.7 的版本,给予 2.x 用户一些在 3.0 版本中被删除方法的警告,这有助于用户的平稳升级。
Nuxt3 好像还在路上,但是目前看来,市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。

周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行中。

Vue3.0 具体更新了啥

来点阳间的知识,说点人话。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

下面以代码片段的形式为大家介绍一下 Vue3.0 作出了哪些新的变化,Vue2.x 对应一些 Vue3.0 的写法。

应用的配置项

config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。

  • devtools
    类型: boolean
    默认值: true
    如何使用:
app.config.devtools = true

是否开启 vue-devtools 工具的检测,默认情况下开发环境是 true,生产环境下则为 false。

  • errorHandler
    类型: Function
    默认值: undefined
    如何使用:
app.config.errorHandler = (err, vm, info) => {
  // info 为 Vue 在某个生命周期发生错误的信息
}

为组件渲染功能和观察程序期间的未捕获错误分配处理程序。

  • globalProperties 🌟
    类型: [key: string]: any
    默认值: undefined
    如何使用:
app.config.globalProperties.name = '十三'

app.component('c-component', {
  mounted() {
    console.log(this.name) // '十三'
  }
})

若是组件内也有 name 属性,则组建内的属性权限比较高。

还有一个知识点很重要,在 Vue2.x 中,我们定义一个全局属性或者方法都是如下所示:

Vue.prototype.$md5 = () => {}

在 Vue3.0 中,我们便可这样定义:

const app = Vue.createApp({})
app.config.globalProperties.$md5 = () => {}
  • performance
    类型: boolean
    默认值: false
    如何使用:
app.config.performance = true

将其设置为 true 可在浏览器 devtool 性能/时间线面板中启用组件初始化,编译,渲染和补丁性能跟踪。 仅在开发模式和支持 Performance.mark API的浏览器中工作。

Application API

全局改变的动作,都在 createApp 所创建的应用实例中,如下所示:

import { createApp } from 'vue'
const app = createApp({})

那么 app 下这些属性:

  • component
    参数: 第一个参数 string 类型表示组件名,第二个参数 Function 或 Object
    返回值: 只传第一个参数,返回组建。带上第二个参数则返回应用程序实例
    如何使用:
import { createApp } from 'vue'
const app = createApp({})
// 注册一个 options 对象
app.component('shisan-component', {
  /* ... */
})

// 检索注册的组件
const ShiSanComponent = app.component('shisan-component')
  • config(上面第一段讲过了)
  • directive
    自定义指令变化不大,还是之前那些东西,如下:
app.directive('my-directive', {
  // 挂载前
  beforeMount() {},
  // 挂载后
  mounted() {},
  // 更新前
  beforeUpdate() {},
  // 更新后
  updated() {},
  // 卸载前
  beforeUnmount() {},
  // 卸载后
  unmounted() {}
})

多数全局API都没变化,还是老的 2.x 的写法居多。

Composition API

Composition API解决了什么问题?

使用传统的 Vue2.x 配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大。由于相关业务的代码需要遵循option 的配置写到特定的区域,导致后续维护非常的复杂,同时代码可复用性不高,你常常会发现一个页面组件,写着写着就写到了三四百行去了。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

有没有熟悉的感觉?没错这就是老的模式带来的弊端,一直憋了这么久,也没谁了~~
而 Composition API 解决了这个令人头疼的问题。
它为我们提供了几个函数,如下所示:

  • reactive
  • watchEffect
  • computed
  • ref
  • toRefs
  • hooks

reactive

import { reactive, computed } from 'vue'
 
export default {
 setup() {
  const state = reactive({
    a: 0
  })
   
  function increment() {
    state.a++
  }
   
  return {
    state,
    increment
  }
 }
}

reactive 相当于 Vue2.x 的 Vue.observable () API,经过 reactive 处理后的函数能变成响应式的数据,类似之前写模板页面时定义的 data 属性的值。

watchEffect

import { reactive, computed, watchEffect } from 'vue'
 
export default {
  setup() {
    const state = reactive({ a: 0 })

    const double = computed(() => state.a * 3)

    function increment() {
      state.count++
    }

    const wa = watchEffect(() => {
      // 使用到了哪个 ref/reactive 对象.value, 就监听哪个
      console.log(double.value)
    })
    // 可以通过 wa.stop 停止监听
    return {
      state,
      increment
    }
  }
}

watchEffect 被称之为副作用,立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。

computed

import { reactive, computed } from 'vue'
 
export default {
  setup() {
   const state = reactive({
    a: 0
   })
   
   const double = computed(() => state.a * 3)
   
   function increment() {
    state.a++
   }
   
   return {
    double,
    state,
    increment
   }
  }
}

这就比较直观了,computed 在 Vue2.x 就存在了,只不过现在使用的形式变了一下,需要被计算的属性,通过上述形式返回。

ref 和 toRefs

toRefs 提供了一个方法可以把 reactive 的值处理为 ref,也就是将响应式的对象处理为普通对象。

hooks

与 2.x 版本相对应的生命周期钩子

Vue2.x 的生命周期 Vue3.x 的生命周期
beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

Vue3.0 在 Composition API 中另外加了两个钩子,分别是 onRenderTrackedonRenderTriggered,两个钩子函数都接收一个 DebuggerEvent :

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}

Vue 3 来了,我们要做些什么?

前面我也开玩笑的讲了三条,要么装不知道,要么赶紧学,而已经学习了 Vue 3 的朋友可以用到自己的项目中,对项目进行优化和升级。这样,在年终总结就可以加上最重要的一条:带领团队成员完成了项目的重构,包括逻辑重构 + 语法升级,全面适配 Vue 3!打包效率提升xx倍!页面响应速度提升 xx!

不仅仅如此,对于学生党或者还在找工作的同学来说,可能在准备面试时又需要多准备一些内容了,冲冲冲!

最后,我想了想我能够做些什么,首先装鸵鸟是不行的,然后不学习也是不行的,因为我上半年的时候写了一个 Vue 的商城项目并开源到 GitHub 网站上,页面效果如下所示:

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

newbee-mall 在 GitHub 和国内的码云都创建了代码仓库,如果有人访问 GitHub 比较慢的话,建议在 Gitee 上查看该项目,两个仓库会保持同步更新。

通过预览图,大家应该也可以看得出来,这不是一个基础的 demo,而是一个功能较为完善的 Vue.js 商城实战系统。自开源到现在,也有很多朋友找我,问我会不会适配 Vue3 并对项目源码进行修改。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

这里,大家可以放心,我一直都回答会升级到 Vue3,并且代码依然全部开源,希望大家都去点个 star,你们越热情,我也会更有动力去重构项目到 Vue3 版本!所以,对我个人来说,其实一直在等着 Vue.js 3.0 版本的正式发布,之后我会抽时间把这个 Vue.js 实战商城项目用 Vue3 再写一下。大家可以给新蜂商城项目点个 star,star 数量越多,我也越有精神头儿去更新,哈哈哈哈哈。

Vue3教程:Vue 3.0 来了,我们该做些什么? _ JavaClub全栈架构师技术笔记

这样,大家就有了 Vue3 的实战经验啦!

除注明转载/出处外,皆为作者原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

作者:程序员十三
来源链接:https://www.cnblogs.com/han-1034683568/p/13703087.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18414.html

标签: vue
分享给朋友:

“Vue3教程:Vue 3.0 来了,我们该做些什么?” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。