Vue作為元件在前端專案中的應用技巧

晴了發表於2019-02-16

為什麼要使用vue

因為現有的前端專案中JS在使用方面過於混亂，存在大量重複呼叫和程式碼衝突（同一段程式碼可能在10個不同的地方都有寫到，被觸發的時候，管理異常困難），所以我認識到之前單純依靠操作DOM的方式是有問題的，應切換到以資料為主。
所以，我考慮將前端的部分功能抽象出來使其成為通用的元件，可以在任意地方方便地被呼叫，並且具備可擴充套件性和易用性。

vue的優點

1.完備的中文文件
2.容易上手
3.體積小（只有<50kb）
4.基於元件化的開發方式
5.優秀的程式碼可讀性、可維護性

期望的實現方式

前後端程式碼分離，元件的vue模板程式碼不出現在php模板中，僅定義一個特定標籤，載入特定的JS檔案就可以實現元件載入，使其成為插拔式使用的元件。

通過$mount方法將vue物件掛載到某個ID的dom節點上

// hideLogin 可以是用來控制登入彈窗的引數之一
<div id="loginForm" data-action="homePage" data-hideLogin="1"></div>

var LoginComponent = require(`loginForm.js`);

var Vue = require(`vue`);
var loginForm = require(`loginForm.vue`);
var login = exports;
var form;
/**
 * 初始化登入元件
 */
login.loadLoginForm = function () {
    if(form){
        return;
    }
    form = new Vue(loginForm);
    form.$mount(`#loginForm`);
};

登入元件 + 業務呼叫

Vue.set() 資料傳遞業務回撥 https://segmentfault.com/a/11…

彈窗控制元件

元件和父子元件，元件通訊，內部生命週期

pop.js

var Vue = require(`vue`);
var pop = require(`pop.vue`);
new Vue({
    el: `#pop`,
    render: function (h) {
        return h(pop)
    }
});

pop.vue // 父元件

<template>
    <div>
        <div class="mask" v-show="showMask" @click="clickMask"></div>
        // 使用listenPop="closePopMsg" 來監聽子元件close pop的行為
        <pop-a v-if="showA"  v-on:listenPop="closePopMsg"></pop-a> 
        // 使用 :showUrl="showUrl"  來給子元件傳值 子元件需要定義 
        // props: {showUrl:showUrl}  來接受傳值
        <pop-b :showUrl="showUrl" v-on:listenPop="closePopMsg"></pop-b>
    </div>
</template>

<script>
// 載入子元件
var popA = require(`popA.vue`);
var popB = require(`popB.vue`);

module.exports = {
        data: function () {
            return {
                showA: false,
                showB: false,
                showMask: false,
                showUrl : ``
                stack: [] // 定義一個棧用來儲存pop順序和流程
            }
        },
        components: {
        // 定義元件時 es6的簡寫語法糖是key:value一致時 不用寫key
          popA:popA,
          popB:popB
        },
        methods: {
            clickMask: function () {
//                console.log(`click_mask`);
            },
            checkShowA: function () {
                if (!this.checkShow()) {
                    return;
                }
                this.stack.push(`showA`);
            },
            checkShowB: function () {
                this.stack.push(`showB`);
            },
            //show出pop
            tryPop: function () {
                if(this.stack.length > 0){
                    var key = this.stack.pop();
                    this[key] = true;
                    this.showMask = true;
                } else {
                    this.showMask = false;
                }
            },
            closePopMsg: function (type) {
                if (type == 1) {
                    this.tryPop()
                }
            }
        },
        created: function () {
            this.checkShowA();
            this.checkShowB();
            this.tryPop();
        }

    };
</script>

子元件（popA.vue）設定一個methods 來給父元件傳值

 methods: {
            closeMsg: function (type) {
                this.$emit("listenPop", type);
            }
        }

城市選擇元件

偵聽器 watch：當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的
過濾器 filter

// watch方法監控該物件，當資料發生變化的時候，觸發function
    watch: {
        list: function(val) {
            this.doSm();
        },
        history: function(val) {
            if(val){
                this.doSm();
            }
        }
    }

// 使用filter 來對介面返回的資料進行處理
    constructUrl: function (list) {
        var vm = this;
        return list.filter(function (item) {
            if (if (vm.type == `1`) {)
            return item[`url`] = `javascript:;`;
        })
    }