Vue.js 實戰總結

時間 2019-12-10

原文原文鏈接

歡迎你們關注騰訊雲技術社區-博客園官方主頁，咱們將持續在博客園爲你們推薦技術精品文章哦~html

做者：徐江偉前端

最近在某個項目中用到了Vue.js,從上手作開發到項目發佈，一步步踩了很多坑。本文試圖總結過去一個多月使用Vue.js中的一些經驗，也算是一點心得體會吧，拿出來與你們分享，歡迎多多交流。vue

Vue.js簡介

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.git

這是來自Vue.js官網的解釋，這裏咱們不打算再照本宣科的把概念翻譯一邊了，僅就做者使用Vue.js的心得體會來作出解釋。熟悉ReactJS或者Angular的讀者可能對此並不陌生。github

Vue.js與ReactJS、AngularJS這些框架同樣都持有相同的開發理念，經過擴展原生的HTML等結構化標籤來做爲其模版語言，此外進一步經過語法上的擴展提供了諸如雙向數據綁定、交互數據模型等概念，從而使開發者從繁雜的DOM操做中解脫出來，將更多的精力用於關注業務自己的內容。web

此外，與React相似的是，均提出了包括虛擬DOM和組件化開發的理念，從而提升了代碼的可維護性和性能。Vue.js試圖用一種極簡的方式來實現以上這些框架帶來的優點，所以，相比於React和Angular來講，Vue.js更加輕量、簡介和優美。vue-router

下面，在進一步探究Vue.js以前，咱們先看一下Vue.js的幾個核心概念。vuex

組件化

組件化開發是最近兩三年比較火的概念。經過使用Vue.js來建立的組件，就像構建萬丈高樓的磚塊同樣，擁有良好的封裝性和複用性。每個組件都擁有其獨立的樣式和數據域，而且徹底與其它組件徹底隔離。簡單的講，任何前端的界面均可以經過合理的規劃，劃分紅擁有不一樣職責的組件。關於組件化開發的概念咱們再也不進一步展開，感興趣的同窗能夠進一步閱讀這篇文章前端工程-基礎篇。vue-cli

Vue.js的插件化

正如你所知，Vue.js的核心部分僅保留了包括數據綁定及組件化開發相關的內容。所以才保證了其極簡的機制。此外，對於附加的功能也提供了高效靈活的插件化機制。對於你們耳熟能詳的插件包括vue-router、vee-validator、vue-touch等。此外，也提供了容許開發者本身封裝組件的機制。從而使你能更有效地抽象某些功能，爲團隊開發所用。例如，你能夠將有關數據計算的邏輯抽象爲獨立的插件，提供給團隊的人使用等。後端

state和vuex

若是你的項目很是簡介，沒有複雜的邏輯，那麼你徹底不必引入vuex。vuex是用來在應用各個組建之間管理和共享應用state的模塊，若是你使用過React那麼你應該對Flux不陌生，vuex起到的做用與此相似。

vue-cli

Vue.js也提供了很是高效的命令行工具，經過使用幾個簡單的命令就能快速構建基於Vue.js的組件和應用，極大的減小了開發者的工做量，將開發者從繁雜的重複性的勞動中解放出來。關於vue-cli，咱們再也不展開，讀者能夠閱讀vue-cli進一步瞭解vue-cli的功能。

經常使用指令

Vue.js提供了包括v-for、v-if、v-show、v-bind、v-model、v-on、v-html等內部指令，這裏再也不細說每個指令的用法，讀者能夠自行參考文檔。

須要說明的是v-if和v-show的不一樣，v-show是經過更改DOM元素的display屬性來實現隱藏與否的，而與v-show不一樣的是，v-if是經過徹底移除DOM元素來實現隱藏與否的。所以，若是你的隱藏內容的確須要反覆，那麼使用v-show，這樣性能更好。

v-bind與v-model不一樣的是，v-model是雙向數據綁定，而v-bind是單向綁定的。

v-for使用的時候，最好提供一個key給vue.js。

數據傳遞

父組件經過props傳遞數據到子組件，子組件經過events來傳遞數據改變到父組件。對於簡單的數據修改，能夠經過這種方式實現。可是對於複雜的數據邏輯，建議經過vuex來管理。例如：父組件傳遞title到子組件：

// 父組件中
<...>
    <child :title="title"></child>
</...>

// 子組件
export default {
    <...>
        props: ['title'], // 而後就能夠經過this.title來使用了
    <...>
}

子組件傳遞修改到父組件,經過事件

// 父組件中
<...>
    <child @changeTitle="changeTitle"></child>
</...>
<...>
export default {
    methods: {
        changeTitle(text) {
            this.title = text;
        }
    }
}
</...>

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

對於全局性的state，能夠經過vuex來封裝。例如用戶登陸信息，全局都用到的常量信息等。對於vuex的內容比較多，你們能夠看這裏。vuex api。

生命週期方法

Vue.js提供了一套完整的組件的生命週期鉤子方法，你能夠在組件的生命週期的各個階段作該作的事情。其完整的生命週期的方法圖示以下：

vue-resource

前端開發不可避免的就是先後端交互，這裏很是推薦vue-resource。建議將涉及到先後端交互的全部API放在一個獨立的api.js文件當中，方便管理。而後在須要接口的地方導入對應的方法便可。下面是一個示例：

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

vue-router

vue-router是基於vue.js用來解決前端路由的方案。vue-router提供了包括動態路由等功能。這裏也給出一個示例：

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

示例中的blog能夠知，咱們能夠傳遞id參數而且在組件中過去id。此外，咱們能夠傳遞多個參數，如’/blog/:blogID/:postId’等。這裏建議不要超過2個，由於傳遞的愈來愈多，就再也不方便管理了。

組件刷新

做者在使用vue.js的過程當中反覆遇到過一個問題，就是組件刷新的問題。例如，做者的項目當中有用到菜單，打開不一樣的菜單對應不一樣的路由和組件。而若是在當前組件中，再次點擊打開當前組件的菜單，則組件並不會刷新。

這就致使一個頭疼的問題，由於用戶點擊菜單自己就是想刷新當前頁面，而組件的數據並無刷新，所以就看不到最新的數據。解決思路就是，在組件路由裏增長了一個時間參數，而後在組件當中增長了對這個時間參數的watch。具體是實現以下：

<...>
    <router-link :paht="'/list' + '?_=' + new Date().valueOf()"></router-link>  // 增長當前時間戳_參數
</...>
而後在組件當中watch這個時間參數就能夠了：
<...>
    export default {
        ...
        watch: {
            "this.$router._": function() {
                // refresh data here
            }
        }
        ...
    }
</...>

總結

亂七八糟的寫了不少，也算是對這段時間用vue.js的一個回顧。不得不認可，在使用vue.js的過程中開始逐漸喜歡上了這個優美而簡潔的框架。所以也願意跟更多的人分享使用它的經驗。也歡迎你們一塊兒交流。

參考

Vue.js官網
《Learning Vue.js》
在組件不變的狀況下和url不變的狀況下刷新視圖
其它參考資料