最近在某個(gè)項(xiàng)目中用到了Vue.js,從上手做開(kāi)發(fā)到項(xiàng)目發(fā)布，一步步踩了不少坑。本文試圖總結(jié)過(guò)去一個(gè)多月使用Vue.js中的一些經(jīng)驗(yàn)，也算是一點(diǎn)心得體會(huì)吧，拿出來(lái)與大家分享，歡迎多多交流。

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無(wú)止境。

Vue.js簡(jiǎn)介

Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.

這是來(lái)自Vue.js官網(wǎng)的解釋，這里我們不打算再照本宣科的把概念翻譯一邊了，僅就作者使用Vue.js的心得體會(huì)來(lái)做出解釋。熟悉ReactJS或者Angular的讀者可能對(duì)此并不陌生。

Vue.js與ReactJS、AngularJS這些框架一樣都持有相同的開(kāi)發(fā)理念，通過(guò)擴(kuò)展原生的HTML等結(jié)構(gòu)化標(biāo)簽來(lái)作為其模版語(yǔ)言，此外進(jìn)一步通過(guò)語(yǔ)法上的擴(kuò)展提供了諸如雙向數(shù)據(jù)綁定、交互數(shù)據(jù)模型等概念，從而使開(kāi)發(fā)者從繁雜的DOM操作中解脫出來(lái)，將更多的精力用于關(guān)注業(yè)務(wù)本身的內(nèi)容。

此外，與React類似的是，均提出了包括虛擬DOM和組件化開(kāi)發(fā)的理念，從而提高了代碼的可維護(hù)性和性能。Vue.js試圖用一種極簡(jiǎn)的方式來(lái)實(shí)現(xiàn)以上這些框架帶來(lái)的優(yōu)勢(shì)，因此，相比于React和Angular來(lái)說(shuō)，Vue.js更加輕量、簡(jiǎn)介和優(yōu)美。

下面，在進(jìn)一步探究Vue.js之前，我們先看一下Vue.js的幾個(gè)核心概念。

組件化

組件化開(kāi)發(fā)是最近兩三年比較火的概念。通過(guò)使用Vue.js來(lái)創(chuàng)建的組件，就像構(gòu)建萬(wàn)丈高樓的磚塊一樣，擁有良好的封裝性和復(fù)用性。每一個(gè)組件都擁有其獨(dú)立的樣式和數(shù)據(jù)域，并且完全與其它組件完全隔離。簡(jiǎn)單的講，任何前端的界面都可以通過(guò)合理的規(guī)劃，劃分成擁有不同職責(zé)的組件。 關(guān)于組件化開(kāi)發(fā)的概念我們不再進(jìn)一步展開(kāi)，感興趣的同學(xué)可以進(jìn)一步閱讀這篇文章前端工程-基礎(chǔ)篇。

Vue.js的插件化

正如你所知，Vue.js的核心部分僅保留了包括數(shù)據(jù)綁定及組件化開(kāi)發(fā)相關(guān)的內(nèi)容。因此才保證了其極簡(jiǎn)的機(jī)制。此外，對(duì)于附加的功能也提供了高效靈活的插件化機(jī)制。對(duì)于大家耳熟能詳?shù)牟寮╲ue-router、vee-validator、vue-touch等。此外，也提供了允許開(kāi)發(fā)者自己封裝組件的機(jī)制。從而使你能更有效地抽象某些功能，為團(tuán)隊(duì)開(kāi)發(fā)所用。例如，你可以將有關(guān)數(shù)據(jù)計(jì)算的邏輯抽象為獨(dú)立的插件，提供給團(tuán)隊(duì)的人使用等。

state和vuex

如果你的項(xiàng)目非常簡(jiǎn)介，沒(méi)有復(fù)雜的邏輯，那么你完全沒(méi)必要引入vuex。vuex是用來(lái)在應(yīng)用各個(gè)組建之間管理和共享應(yīng)用state的模塊，如果你使用過(guò)React那么你應(yīng)該對(duì)Flux不陌生，vuex起到的作用與此類似。

vue-cli

Vue.js也提供了非常高效的命令行工具，通過(guò)使用幾個(gè)簡(jiǎn)單的命令就能快速構(gòu)建基于Vue.js的組件和應(yīng)用，極大的減少了開(kāi)發(fā)者的工作量，將開(kāi)發(fā)者從繁雜的重復(fù)性的勞動(dòng)中解放出來(lái)。關(guān)于vue-cli，我們不再展開(kāi)，讀者可以閱讀vue-cli進(jìn)一步了解vue-cli的功能。

常用指令

Vue.js提供了包括v-for、v-if、v-show、v-bind、v-model、v-on、v-html等內(nèi)部指令，這里不再細(xì)說(shuō)每一個(gè)指令的用法，讀者可以自行參考文檔。

需要說(shuō)明的是v-if和v-show的不同，v-show是通過(guò)更改DOM元素的display屬性來(lái)實(shí)現(xiàn)隱藏與否的，而與v-show不同的是，v-if是通過(guò)完全移除DOM元素來(lái)實(shí)現(xiàn)隱藏與否的。因此，如果你的隱藏內(nèi)容的確需要反復(fù)，那么使用v-show，這樣性能更好。

v-bind與v-model不同的是，v-model是雙向數(shù)據(jù)綁定，而v-bind是單向綁定的。

v-for使用的時(shí)候，最好提供一個(gè)key給vue.js。

數(shù)據(jù)傳遞

父組件通過(guò)props傳遞數(shù)據(jù)到子組件 ，子組件通過(guò)events來(lái)傳遞數(shù)據(jù)改變到父組件。對(duì)于簡(jiǎn)單的數(shù)據(jù)修改，可以通過(guò)這種方式實(shí)現(xiàn)。但是對(duì)于復(fù)雜的數(shù)據(jù)邏輯，建議通過(guò)vuex來(lái)管理。例如：父組件傳遞title到子組件：

// 父組件中<...>
    
// 子組件export default {    <...>
        props: ['title'], // 然后就可以通過(guò)this.title來(lái)使用了
    <...>}

子組件傳遞修改到父組件,通過(guò)事件

// 父組件中<...>
    

<...>export default {
    methods: {
        changeTitle(text) {            this.title = text;
        }
    }
}// 子組件export default {
    methods: {
        onChangeTitle (text) {            this.$emit('changeTitle', this.id, text)
        }
    }
}

對(duì)于全局性的state，可以通過(guò)vuex來(lái)封裝。例如用戶登錄信息，全局都用到的常量信息等。對(duì)于vuex的內(nèi)容比較多，大家可以看這里。vuex api。

生命周期方法

Vue.js提供了一套完整的組件的生命周期鉤子方法，你可以在組件的生命周期的各個(gè)階段做該做的事情。其完整的生命周期的方法圖示如下：

vue-resource

前端開(kāi)發(fā)不可避免的就是前后端交互，這里非常推薦vue-resource。建議將涉及到前后端交互的所有API放在一個(gè)獨(dú)立的api.js文件當(dāng)中，方便管理。然后在需要接口的地方導(dǎo)入對(duì)應(yīng)的方法即可。下面是一個(gè)示例：

import Vue from 'vue'import VueResource from 'vue-resource'Vue.use(VueResource)const API = {    "getYAndMGrade": "http://localhost:3000/demo/getYAndMGrade", 
    "createMonthPlan": "http://localhost:3000/demo/createMonthPlan"};const post = (url,params)=>{    return Vue.http.post(url,{        params: params
    }).then(function (res) {        return res.data;
    });
};// 接口1export const getYAndMGrade = (user) => {    return post(API.getYAndMGrade, {user:user});
};// 接口2export const createMonthPlan = (user, month)=> {    return post(API.createMonthPlan, {user: user, month: month});
};

vue-router

vue-router是基于vue.js用來(lái)解決前端路由的方案。vue-router提供了包括動(dòng)態(tài)路由等功能。這里也給出一個(gè)示例：

export default [
  {
      name: 'about',
      path: '/about/',
      component: require('./pages/about.vue')
  },
  {
      name: 'blog',
      path: '/blog/:blogId',
      component: require('./pages/blog.vue')
  }
]

示例中的blog可以知，我們可以傳遞id參數(shù)并且在組件中過(guò)去id。此外，我們可以傳遞多個(gè)參數(shù)，如’/blog/:blogID/:postId’等。這里建議不要超過(guò)2個(gè)，因?yàn)閭鬟f的越來(lái)越多，就不再方便管理了。

組件刷新

作者在使用vue.js的過(guò)程中反復(fù)遇到過(guò)一個(gè)問(wèn)題，就是組件刷新的問(wèn)題。例如，作者的項(xiàng)目當(dāng)中有用到菜單，打開(kāi)不同的菜單對(duì)應(yīng)不同的路由和組件。而如果在當(dāng)前組件中，再次點(diǎn)擊打開(kāi)當(dāng)前組件的菜單，則組件并不會(huì)刷新。

這就導(dǎo)致一個(gè)頭疼的問(wèn)題，因?yàn)橛脩酎c(diǎn)擊菜單本身就是想刷新當(dāng)前頁(yè)面，而組件的數(shù)據(jù)并沒(méi)有刷新，因此就看不到最新的數(shù)據(jù)。解決思路就是，在組件路由里增加了一個(gè)時(shí)間參數(shù)，然后在組件當(dāng)中增加了對(duì)這個(gè)時(shí)間參數(shù)的watch。具體是實(shí)現(xiàn)如下：

<...>