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>