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>