业务背景是在jq前端项目中添加Vue作为组件。原来的登录功能是在每个页面添加登录弹窗（手机号+验证登录的验证码），然后向后台发送ajax请求，登录成功后进行一些操作。但是随着需要登录的页面越来越多，多个页面需要添加相同的html、js、css和前端登录逻辑，所以在原来的项目中添加了vue，将重复添加的代码添加到vue文件。然后通过$mount方法将vue对象挂载到某个ID的dom节点上。这样所有页面调用统一的登录弹窗，执行相同的js登录代码，实现了页面上登录逻辑和业务逻辑的完全解耦。但后来要求又变了。本来loginForm组件只是一个登录的弹窗，但是有一个页面PM同学想直接执行后台逻辑，不执行认证登录逻辑。只需输入手机号码即可。好的。..我找到了解决这个问题的Vue.set方法：通过Vue.set方法给vue对象中的数据设置一个响应式对象，使得该对象在初始化阶段就可以接收控制参数。Vue.set(form.$data,'setData',数据);在不同的页面中，向页面传递不同的参数来控制弹窗的显示，以及后续是否执行ajax请求逻辑。调用登录组件的jsvarcallBack=function(){//添加回调方法作为回调函数，将业务代码与登录逻辑解耦...}varLoginComponent=require('loginForm.js');//获取登录组件varsetData={'hideLogin':true,'callBack':callBack};//自定义数据LoginComponent.loadLoginForm(setData);//初始化登录组件loginForm.jsvarVue=require('vue');varloginForm=require('loginForm.vue');//引入一个带有模板的vue文件varlogin=exports;varform;/***初始化登录组件*/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对象中的数据设置一个响应对象，绕过限制}form.$mount('#loginForm');//绑定挂载对象到anid};html
