– 关注前端和node js,分享福利和心得!

vue3尝鲜

Vue3正式版本已经出来了,vue-cli最新版也已经支持创建vue3的项目了,虽然实际项目用的人还比较少,但是我们可以先来尝尝鲜

安装

1、如果是全新安装的,之前没有安装过vue-cli的脚手架工具

npm i -g @vue/cli

2、如果之前安装的是@vue/cli 3.X的版本,可以直接升级

npm update -g @vue/cli

3、如果之前安装的是vue-cli,需要先卸载,在安装新版

npm uninstall -g vue-cli
npm i -g @vue/cli

查看版本

vue -V
@vue/cli 4.5.7

创建项目

vue3创建项目还是和之前一样,可以通过命令行或者图形界面来创建,相信做开发的大部分都是命令行吧

vue create vue3-test

选择模板,这里选择自定义方式

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

选择要使用的插件

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

选择vue版本,这里我们肯定选择3.x

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
 3.x (Preview)

是否需要使用class-style,选择n

Use class-style component syntax?

是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

ESLint的配置

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

后面的保持默认就好,创建好的项目目录结构和使用vue-cli3.X创建的基本一致,也不做过多赘述

定义组件

打开默认的首页组件,我们会发现定义组件的方式跟之前不一样了,使用了defineComponent

import {defineComponent} from 'vue'
export default defineComponent({
    name:'Home'
})

需要说明的是,在vue3中,我们任然可以直接使用vue2的写法,也就是和之前的vue开发没有什么两样

模板渲染

<template>
 {{msg}}
<button @click='changeMsg'>修改msg</button>
</template>
import {defineComponent,ref} from 'vue'
export defaullt defineComponent({
    name:'Home',
    setup(){
        const msg=ref('绑定的数据')
        const changeMsg=()=>{
            msg.value='修改后msg'
        }
        return {
            msg,
            changeMsg
        }
    }

})

在vue3中定义数据和方法都是在setup这个函数中进行了,并且在默认中使用都得数据和方法都需要在setup中return出来,需要注意的是,在模板中需要使用的数据在定义的使用都需要使用ref函数包装一下(类似于react中的useState),在修改值的时候需要使用msg.value

reactive简化

在上面的例子中,改变和读取变量的时候,都要加上value,用起来很不爽,可以使用reactive来简化

<template>
 <div>{{data.num}}</div>
    <button @click='data.add'>add</button>
    <button @click='data.reduce'>reduce</button>
</template>
import {defineComponent,reactive} from 'vue'
setup(){
    const data=reactive({
        num:0,
        add:()=>{
            data.num++
        },
        reduce:()=>{
            data.numm--
        }
    })
    return {
        data
    }
}

使用toRefs()继续优化

通过reactive优化后,在使用和改变变量时不需要在写value了,但是上面的例子中在模板中还是要使用data.num的形式来使用,聪明的你肯定想到了,在return时直接...data解构出来,但是很不幸,这样解构出来后就变成了普通变量,不能响应式变化了,这个时候就需要使用toRefs()了。

<template>
 <div>{{num}}</div>
    <button @click='add'>add</button>
    <button @click='reduce'>reduce</button>
</template>
import {reactive,toRefs} from 'vue'
export default {
    setup(){
        const data=reactive({
            num:0,
            add:()=>{
                data.num++
            },
            reduce:()=>{
                data.num--
            }
        })
        const refData=toRefs(data)
        return {
            ...refData
        }
    }
}

最新文章

    热门文章