Vue3.0初体验 - 新功能以及相关库使用

前言

vue3.0从发布到现在已经有几个月了,基本上大家都处于一个试玩阶段。但搬砖的厂里有了新项目,领导提出新项目用vue3.0 + ts踩坑的想法,那么vue3.0到底怎么玩,最近也稍微搞了下,下面快速和铁汁们分享一波基础的使用。

看完文章,你会学习到:

  1. vue3的使用安装
  2. vue3的新特性
  3. vuex,vue-router的升级和使用

老样子,下面我们直接开冲!
image

体验Vue3的方式

  • vue-cli
官方指定cli工具,要更新最新版本。这个比较稳定,建议刚开始使用这个
  // 新版vue-cli会多出一个创建vue3的项目、选择vue3之后、其他的配置就看大家们的喜好了
  npm install -g @vue/cli
  vue create vue3-project
  cd vue3-project
  vue add vue-next
  npm run serve
  • webpack
这个是vue-cli还没开始支持时候,vue官网自己搞得一套webpack项目配置,直接clone
  git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
  cd 01-vue3-webpack
  npm install 
  npm run dev
  • vite
这个就比较有意思了,这个是尤大大最近着重开发的一个工具,意在替代webpack打包,核心是利用浏览器现在已经支持import,遇到import会使用http请求去加载文件,在vite中使用koa拦截这些请求,进行分类以及预编译,加载各个模块,在build时候使用rollup进行打包,节省了大部分时间,实现复杂项目秒开
  npm install -g create-vite-app
  create-vite-app vue3-vite
  cd vue3-vite
  npm install
  npm run dev

ps: 铁汁们在使用的时候注意自己的node版本,使用vite时候需要高版本的node。

Vue3新特性

  • Composition API体验
包含setup、ref、computed等。由于reactive,compiler-sfc, complier-dom等核心模块的抽离,可以更加自由的在项目中引用使用,使函数式编程可以发挥更大的作用

setup

Vue3.0的重要新函数,熟悉React的同学们肯定经常用Hooks,其实我个人感觉这个和Hooks其实很像,当然我也不清楚尤大大是不是借鉴的React(/手动狗头),不过函数式编程肯定是爽的。

setup是个独立的函数,内部可以使用Vue的所有模块,包括了生命周期、响应式、computed、watch等,最后返回一个对象,可以在template中直接调用。

reactive、ref

看名字就知道是vue的三大件之一响应式的模块,这次做了很大革新,使用了proxy代替以前的defineprototype,性能上提升很多,支持了Array的监听,并且单独抽离了出来。
使用方式是传入一个对象,返回一个proxy代理监听过的对象,代理过的数据都是响应式的。

computed、watch
这次computed和watch都拆分成了独立的模块,在使用的时候按需引入进来使用方式也有了丢丢改变

好了,说了那么多,光说不练假把式,我们写个来看看:


  • Fragment

这个我个人认为还是很爽的,支持多根节点,不用特意在外面故意套一层无用DOM,虽然一些纠错工具依然会标红就是了....



  • Teleport

这个和react的传送门的概念差不多,也是创建一个DOM插入到根节点。



Vue3配套的库

虽然上面说了Vue3的新特性,咱们开发项目肯定不能只用框架使劲怼,还得让配套的库跟上才好用,下面介绍下vuex和vue-router的使用。

  • 一键升级vuex和vue-router
vue add vue-next
  • vue-router 4.x 单独安装&使用

    • 安装方式
    npm install [email protected]
    • 使用方式
    // route.js
    // route注册
    import { createRouter, createWebHistory } from 'vue-router'
    
    const routes = [
      // ...这里老样子
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router
    
    // Page页面
    // template中使用 组件相同 Link Router-view组件
    
    
    // script中方法调用
    
    
  • vuex 4.x 单独安装&使用

    • 安装方式
    npm install [email protected]
    • 使用方式
       // store.js
       // vuex注册
      import { createStore } from 'vuex'
    
      export default createStore({
        state: {
            userName: 'xiaoming'
        },
        mutations: {},
        actions: {},
        getters: {},
        modules: {}
      })
        
      // Page页面
      // 获取store
      
  • vue和相关库在main文件中注册使用
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'
import store from './store/index.js'

const app = createApp(App)

// 注册路由
app.use(router)

// 注册vuex
app.use(store)

// ps: 相关的install,一定要在mount之前注册

app.mount('#app')

写在最后

正文到这里差不多就结束了。说句题外话,vue3.x对于vue2.x来说更新的还是蛮多的,除了我们已经说烂了的响应式重写,静态属性提升优化,diff最长递增子序列等等,写法上也有了很大不同。我个人还是蛮喜欢函数式编程的写法,兄弟萌可以在平时无聊的时候玩一玩。

emmmmmm,虽然element-ui已经基本不更新了,更别说适配vue3。组件库说实话,确实是个问题,不过这个之后肯定也是会解决的。

这次分享到这里就结束了,觉得有用的兄弟萌可以点个赞。文中有不对的地方,也希望大佬们帮我指出改正,hhhh。
image

你可能感兴趣的