我们在做Vue.js开发时，通常页面上只创建一个vue实例，代码的样式大概是这样的：
{{message}}
var vue=new Vue({
el: '#app',
data() {
return {
message: "This is my vue"
}
}
});
但在某些情况下，我们需要在页面上有多个vue实例，实践证明，Vue.js是支持多实例共存的，示例代码如下：
{{message}}
{{message}}
var vue1=new Vue({
el: '#app1',
data() {
return {
message: "This is Vue1"
}
}
});
var vue2 = new Vue({
el: '#app2',
data() {
return {
message: "This is Vue2"
}
}
});
尽管这种解决方案可行，但并不推荐在复杂场景下使用。最近的项目中，遇到了一个场景，可以使用这种解决方案。在一个使用Asp.Net MVC的项目中，有一个“个人工作内容页面”，页面中包含很多互相没有关系的模块，比如“待办事务列表”、“会议通知”、“事件提醒”等等，这些模块根据登录用户权限动态进行加载，也就是说不同权限的用户页面上显示的模块是不一样的。在这个项目中，我们把每个模块作为一个MVC的局部视图，在控制器中，根据用户的权限，动态加载对应的局部视图。每个局部视图，都采用vue.js开发相应的客户端功能，每个局部视图中的vue都是一个独立的实例。
作者：寻找无名的特质
链接：https://www.jianshu.com/p/67944c60272e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。