前言
首先,為什麼我需要做這個項目準備工作呢?因為常年習慣React開發的我,最近突然接手了一個Vue項目,而之前基本沒有過Vue的實踐,這麼突兀讓還在沉溺於React開發的我進行Vue開發,甚是不習慣,那自然我需要想辦法讓Vue開發儘量與React相似,這樣大概讓自己在開發過程中更得心應手吧。
原文地址
組件開發
特性對比
眾所周知,Vue和React都有那麼一個特性,那就是可以讓我們進行組件化開發,這樣可以讓代碼得到更好的重用以及解耦,在架構定位中這個應該叫縱向分層吧。但是,兩個框架開發組件的寫法都有所不同(這個不同是基於我的開發習慣),下面先看一下不同的地方。
首先是React,個人習慣於es6的寫法(從來沒用過es5的createClass的寫法):
import React, { Component } from 'react';
import propTypes from 'prop-types';
export default class Demo extends Component {
state = {
text: 'hello world'
};
static propTypes = {
title: PropTypes.String
}
static defaultProps = {
title: 'React Demo'
}
setText = e => {
this.setState({
text: '點擊了按鈕'
})
}
componentWillReveiveProps(nextProps) {
console.log(`標題從 ${this.props.title} 變為了 ${nextProps.title}`)
}
render() {
const { title } = this.props;
const { text } = this.state;
return
{title}
{text}
<button>按鈕<button>
/<button>/<button>
}
}
下面是常見vue的寫法:
<template>
{{title}}
{{text}}
<button>按鈕/<button>
/<template>
這裡的視圖渲染我們先忽略,下一節在詳細對比。
prop對比:
- Vue的prop必須在props字段裡聲明。React的prop不強制聲明,聲明時也可以使用prop-types對其聲明約束。
- Vue的prop聲明過後掛在在組件的this下,需要的時候在this中獲取。React的prop存在組件的props字段中,使用的時候直接在this.props中獲取。
組件狀態對比,Vue為data,React為state:
- Vue的狀態data需要在組件的data字段中以函數的方式聲明並返回一個對象。React的狀態state可以直接掛載在組件的state字段下,在使用之前初始化即可。
- Vue的狀態data聲明後掛在在this下面,需要的是時候在this中獲取。React的狀態state存在組件的state字段中,使用的時候直接在this.state中獲取。
- Vue的狀態更新可以直接對其進行賦值,視圖可以直接得到同步。React的狀態更新必須使用setState,否則視圖不會更新。
然後是組件方法對比:
- Vue的方法需要在methods字段下聲明。React的方法用方法的方式聲明在組件下即可。
- Vue與React使用方法的方式相同,因為都是掛載在組件中,直接在this中獲取即可。
計算屬性computed對比:
- Vue有計算屬性在computed字段中聲明。React中無計算屬性特性,需要其他庫如mobx輔助完成。
- Vue的計算屬性聲明後掛載在this下,需要的時候在this中獲取。
監聽數據對比:
- Vue中可以在watch字段中對prop、data、computed進行對比,然後做相應的操作。在React所有變化需要在聲明週期componentWillReveiveProps中手動將state和prop進行對比。
對比完後發現,其實Vue給我的個人感覺就是自己在寫配置,只不過配置是以函數的形式在寫,然後Vue幫你把這些配置好的東西掛載到組件下面。而且prop、data、computed、方法所有都是掛載組件下,其實單單從js語法上很難以理解,比如說我在computed中,想獲取data的text數據,使用的是this.text來獲取,如果拋開vue,單單用js語法來看,其實this大多情況是指向computed對象的,所以個人覺得這樣的語法是反面向對象的。
這個時候在反過來看React的class寫法,本來就是屬於面向對象的寫法,狀態state歸狀態,屬性prop歸屬性,方法歸方法,想獲取什麼內容,通過this直接獲取,更接近於JavaScript編程,相對來說比較好理解。
組件改造
針對Vue的反面向對象,我們可以更改其寫法,通過語法糖的形式,將其我們自己的寫法編譯成Vue需要的寫法。
vue-class-component
vue-class-component 是Vue英文官網推薦的一個包,可以以class的模式寫vue組件,它帶來了很多便利:
- methods,鉤子都可以直接寫作class的方法
- computed屬性可以直接通過get來獲得
- 初始化data可以聲明為class的屬性
- 其他的都可以放到Component裝飾器裡
vue-property-decorator
vue-property-decorator 這個包完全依賴於vue-class-component,提供了多個裝飾器,輔助完成prop、watch、model等屬性的聲明。
編譯準備
由於使用的是裝飾器語法糖,我們需要在我們webpack的babel編譯器中對齊進行支持。
首先是class語法支持,針對babel6及更低的版本,需要配置babel的plugin中添加class語法支持插件babel-plugin-transform-class-properties,針對babel7,需要使用插件@babel/plugin-proposal-class-properties對class進行語法轉換。
然後是裝飾器語法支持,針對babel6及更低的版本,需要配置babel的plugin中添加裝飾器語法支持插件babel-plugin-transform-decorators-legacy,針對babel7,需要使用插件@babel/plugin-proposal-decorators對裝飾器進行語法轉換。
針對bable6,配置.babelrc如下
{
"presets": ["env", "stage-1"],
"plugins": [
"transform-runtime",
"syntax-dynamic-import",
"transform-class-properties", // 新增class語法支持
"transform-decorators-legacy" // 新增裝飾器語法支持
]
}
對於bable7,官方推薦直接使用@vue/apppreset,該預設包含了@babel/plugin-proposal-class-properties和@babel/plugin-proposal-decorators兩個插件,另外還包含了動態分割加載chunks支持@babel/plugin-syntax-dynamic-import,同時也包含了@babel/envpreset,.babelrc配置如下:
{
"presets": [
["@vue/app", {
"loose": true,
"decoratorsLegacy": true
}]
]
}
重寫組件
編譯插件準備好之後,我們對上面的Vue組件進行改寫,代碼如下
<template>
{{title}}
{{text}}
<button>按鈕/<button>
/<template>
到此為止,我們的組件改寫完畢,相對先前的“寫配置”的寫法,看起來相對來說要好理解一些吧。
注意:Vue的class的寫法的methods還是沒辦法使用箭頭函數進行的,詳細原因這裡就不展開,大概就是因為Vue內部掛載函數的方式的原因。
視圖開發
特性對比
針對視圖的開發,Vue推崇html、js、css分離的寫法,React推崇all-in-js,所有都在js中進行寫法。
當然各有各的好處,如Vue將其進行分離,代碼易讀性較好,但是在html中無法完美的展示JavaScript的編程能力,而對於React的jsx寫法,因為有JavaScript的編程語法支持,讓我們更靈活的完成視圖開發。
對於這類不靈活的情況,Vue也對jsx進行了支持,只需要在babel中添加插件babel-plugin-transform-vue-jsx、babel-plugin-syntax-jsx、babel-helper-vue-jsx-merge-props(babel6,對於babel7,官方推薦的@vue/app預設中已包含了jsx的轉化插件),我們就可以像React一樣,在組件中聲明render函數並返回jsx對象,如下我們對上一節的組件進行改造:
組件改造
Vue的jsx使用注意點
寫到這裡,也基本上發現其寫法已經與React的class寫法雷同了。那麼Vue的jsx和React的jsx有什麼不同呢。
在React的jsx語法需要React支持,也就是說,在你使用jsx的模塊中,必須引進React。
而Vue的jsx語法需要Vue的createElement支持,也就是說在你的jsx語法的作用域當中,必須存在變量h,變量h為createElement的別名,這是Vue生態系統中的一個通用慣例,在render中h變量由編譯器自動注入到作用域中,自動注入詳情見plugin-transform-vue-jsx,如果沒有變量h,需要從組件中獲取並聲明,代碼如下:
const h = this.$createElement;
這裡藉助官方的一個例子,基本包含了所有Vue的jsx常用語法,如下:
// ...
render (h) {
return (
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
)
}
但是,Vue的jsx語法無法支持Vue的內建指令,唯一的例外是v-show,該指令可以使用v-show={value}的語法。大多數指令都可以用編程方式實現,比如v-if就是一個三元表達式,v-for就是一個array.map()等。
如果是自定義指令,可以使用v-name={value}語法,但是該語法不支持指令的參數arguments和修飾器modifier。有以下兩個解決方法:
- 將所有內容以一個對象傳入,如:v-name={{ value, modifier: true }}
- 使用原生的vnode指令數據格式,如:
const directives = [
{ name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return
那麼,我們什麼時候使用jsx,什麼時候template呢?很明顯,面對那麼複雜多變的視圖渲染,我們使用jsx語法更能得心應手,面對簡單的視圖,我們使用template能開發得更快。
狀態管理
特性對比
針對狀態管理,Vue的Vuex和React的Redux很雷同,都是Flow數據流。
對於React來說,state需要通過mapStateToProps將state傳入到組件的props中,action需要通過mapDispatchToProps將action注入到組件的props中,然後在組件的props中獲取並執行。
而在Vue中,store在組件的$store中,可以直接this.$store.dispatch(actionType)來分發action,屬性也可以通過mapState,或者mapGetter把state或者getter掛載到組件的computed下,更粗暴的可以直接this.$store.state或者this.$store.getter獲取,非常方便。
組件改造
我們為了更貼切於es6的class寫法,更好的配合vue-class-component,我們需要通過其他的方式將store的數據注入到組件中。
vuex-class
vuex-class,這個包的出現,就是為了更好的講Vuex與class方式的Vue組件連接起來。
import Vuex from 'vuex';
const store = new Vuex.Store({
modules: {
foo: {
namespaced: true,
state: {
text: 'hello world',
},
actions: {
setTextAction: ({commit}, newText) => {
commit('setText', newText);
}
},
mutations: {
setText: (state, newText) => {
state.text = newText;
}
}
}
}
})
針對這個store,我們改寫我們上一章節的組件
<template>
{{title}}
{{text}}
<button>按鈕/<button>
/<template>
這裡可以發現,store聲明瞭一個foo模塊,然後在使用的時候從store中取出了foo模塊,然後使用裝飾器的形式將state和action注入到組件中,我們就可以省去dispatch的代碼,讓語法糖幫我們dispatch。這樣的代碼,看起來更貼切與面向對象。。。好吧,我承認這個代碼越寫越像Java了。
然而,之前的我並不是使用Redux開發React的,而是Mobx,所以這種 dispatch -> action -> matation -> state 的形式對我來說也不是很爽,我還是更喜歡把狀態管理也以class的形式去編寫,這個時候我又找了另外一個包(vuex-module-decorators)[https://www.npmjs.com/package...]來改寫我的store.module。
下面我們改寫上面的store:
import Vuex from 'vuex';
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
@Module
class foo extends VuexModule {
text = 'hello world'
@Mutation
setText(text) {
this.text = text;
}
@Action({ commit: 'setText' })
setTextAction(text) {
return text;
}
}
const store = new Vuex.Store({
modules: {
foo: foo
})
export default store;
這樣,我們的項目準備基本上完畢了,把Vue組件和Vuex狀態管理以class的形式來編寫。大概是我覺得es5的寫法顯得不太優雅吧,沒有es6的寫法那麼高端。
結束
class語法和裝飾器decorators語法都是ES6的提案,都帶給了前端不一樣的編程體驗,大概也是前端的一個比較大的革命吧,我們應該擁抱這樣的革命變化。
閱讀更多 非洲程序猿 的文章