Vue3.0初体验.


2020/4/17凌晨 4 点左右,vue-next v3.0.0-beta.1 版本发布,做为使用了接近两年vue的我来说,当然是在第一时间就上手体验一波.

vue-next v3.0.0-beta.1发布的内容有:

  • vue: Beta
  • vue-router: Alpha
  • vuex: Alpha
  • vue-class-component: Alpha
  • vue-cli: Experimental support via vue-cli-plugin-vue-next
  • eslint-plugin-vue: Alpha
  • vue-test-utils: Alpha
  • vue-devtools: WIP
  • jsx: WIP

vue3.0项目初始化

  1. 查看自己的cli版本vue -V,如果不是最新版,需要安装最新版本的vue-cli

    • npm install -g @vue/cli
  2. 初始化vue项目,进入vue-cli Ui控制台创建

    • 勾选基本的Vuex,Vue-Router,CSS Pre-processors,Linter / Formatter等.
  3. (还没完,先别急着启动项目)目前创建 Vue 3.0 项目需要通过插件升级的方式来实现,vue-cli 还没有直接支持,我们进入项目目录,并输入以下指令:
    • vue add vue-next

      执行这一段后会:

    • 安装 Vue 3.0 依赖
    • 更新 Vue 3.0 webpack loader 配置,使其能够支持 .vue 文件构建(这点非常重要)
    • 创建 Vue 3.0 的模板代码
    • 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本,如果未安装则不会升级
    • 自动生成 Vue Router 和 Vuex 模板代码

尝试一下vue3.0的新特性

Vue 3.0 中初始化状态通过 setup 方法

import { ref } from 'vue'
export default{
setup (){
}
}

定义状态ref与事件

<template>
  <div>
    <p>count:{{count}}</p>
    <button @click="add">加</button>
  </div>
</template>
import { ref } from 'vue'
export default{
setup (){
    // 创建count变量
    const count = ref(0)
    // 创建一个方法
    const add = () => {
      count.value++
    }
 return {
 count,
 add
 }
}
}

计算属性与监听器

import { ref,computed } from 'vue'
export default{
setup (){
    // 创建count变量
    const count = ref(0)
    // 创建一个方法
    const add = () => {
      count.value++
    }
    // 计算属性
    const GetCount = computed(() => count.value * 2)
    // 监听
    watch(() => count.value, val => { console.log(val) })
 return {
 count,
 add,
 GetCount
 }
}
}

ctx获取上下文

  1. 通过getCurrentInstance方法可以获取上下文,通过ctx.router是路由实例,ctx.store获取vuex实例等等.
    import { getCurrentInstance } from 'vue'
    export default {
    setup () {
    // ctx获取上下文,路由信息,vuex等
    const { ctx } = getCurrentInstance()
    }
    }

    总结一下

  2. vue3.0有一些与react hook非常的相似,如果有使用过react hook应该不会非常的诧异.
  3. 目前只是发布了beta版,并不适用在项目中.
  4. 适配vue3.0的vuex与vue-router都还在开发中,现在的vuex与vue-router改动并不大,适配vue3.0的vuex与vue-router可能会有一些useRoute,useStore类似react的,这些需要等正式版本发布才能揭晓.

    非常期待vue3.0的正式版本,应该又是一种全新的体验吧.

声明:Web前端小站 - 前端博客 - 南岸有归的个人博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue3.0初体验.


行路有良友,便是捷径。带上我吧,一起去看更大的世界。