Vue做爲組件在前端項目中的應用&Vue.set 的用法

業務背景是，在jq的前端項目中加入Vue做爲組件。

本來的登陸功能是每一個頁面加一個登陸彈窗（手機號+驗證碼驗證登陸），而後發ajax請求到後端，登陸成功後再進行一些操做。

但隨着須要登陸的頁面的增多，多個頁面都須要添加相同的html，js，css以及前端登陸邏輯，因此在原先的項目中添加了vue，將重複的添加的代碼加入到了vue文件中，而後經過$mount方法將vue對象掛載到某個ID的dom節點上。這樣，就讓全部的頁面調用統一的登陸彈窗，執行相同的js登陸代碼了，而且將登陸邏輯徹底與頁面上的業務邏輯解耦了。

但後來需求又有了新的變化，本來loginForm 組件只是一個用來登陸的彈窗，但有一個頁面PM同窗卻但願不用執行驗證登陸邏輯，只要輸入手機號，就能夠直接直接執行後端邏輯。

好吧。。。

我找了 Vue.set 方法解決了這個問題：
經過Vue.set方法向vue對象中的data設置一個響應式對象，使該對象可以在初始化階段接收控制參數 Vue.set(form.$data, 'setData', data);
在不一樣的頁面向頁面傳輸不一樣的參數來控制彈窗顯示，以及後續是否執行ajax請求邏輯。

調用登陸組件的js

var callBack = function () {//加入callback方法做爲回調函數，將業務代碼與登陸邏輯解耦
    ...
}
var LoginComponent = require('loginForm.js');//得到登陸組件
var setData = {
    'hideLogin': true,
    'callBack': callBack
};//自定義數據
LoginComponent.loadLoginForm(setData);//初始化登陸組件

loginForm.js

var Vue = require('vue');
var loginForm=require('loginForm.vue'); //引入一個附帶模板的vue文件
var login = exports;
var form;
/**
 * 初始化登陸組件
 */
login.loadLoginForm = function (data) {
    if(form){
        return;
    }
    form = newVue(loginForm); //new一個vue對象
    if (typeof(data) !== "undefined") {
        //經過Vue.set方法對要顯示的對象進行控制，使該對象可以在初始化階段接收控制參數
        Vue.set(form.$data, 'setData', data);//向vue對象中的data設置一個響應式對象，繞過了限制
    }
    form.$mount('#loginForm');//將對象綁定掛載到某個id上
};

html
<div id="loginForm"></div>

loginForm.vue

<template>
  /** 登陸彈窗 **/
  <div>
    <input v-if="show" />
    <input v-if="!setData.hideLogin" />
    ...
  </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                setData: {}
            }
        },
        methods: {
            getA: function () {
                ...
                if (true) {
                    this.setData.callBack();// 執行回調函數
                }
            },
            setB: function () {
                ...
            }
        },
        created: function () {
            this.setB();
        },
        updated: function () {
            this.getA();
        }
</script>