vue的深入理解_vue为什么不建议一个目录下很多vue文件-CSDN博客

本文链接：https://blog.csdn.net/dai_yanxia/article/details/105558878

本文通过7个关键问题探讨Vue的深入理解，包括一个页面能否创建多个实例，组件是否可实例化，一个组件能否注册多个名字，以及多个实例是否可以共用同一个路由或数据实例等。实验证明，Vue支持多个实例并存，组件可以被实例化并作为根组件使用，一个组件可以有多个注册名称，多个实例可以共用路由和数据实例。

摘要由CSDN通过智能技术生成

1. 一个页面是否可以创建多个Vue实例
2. 当el匹配多个元素时，Vue实例是否在每个元素上都渲染
3. 多个Vue实例挂载到同一个元素上，最终会显示哪一个
4. Vue可以用来实例化，那组件可不可以实例化
5. 一个组件是否可以注册为多个组件名
6. 多个Vue实例是否可以共用一个Vue Router实例
7. 多个Vue实例是否可以共用一个Store实例

近期项目用到Vue，只需引入Vue的js来完成即可，官方文档虽有使用说明，但是相对于整个项目都用Vue来写的文档，单独引用vuejs文件的使用说明相对来说要少一些，这时需对Vue有深入的理解，才能正确使用，本人也是在此次摸索的过程中，对Vue有了更深入的理解。

首先我们思考几个问题：

一个页面是否可以创建多个Vue实例；
当el匹配多个元素时，Vue实例会不会分别在每个元素上渲染；
多个Vue实例挂载到同一个元素上，最终会显示哪一个；
Vue可以用来实例化，那组件可不可以实例化；
不同标签是否可以引用同一个组件，即：一个组件是否可以命名多个name；
多个Vue实例是否可以共用一个Vue Router实例
多个Vue实例是否可以共用一个Store实例

1. 一个页面是否可以创建多个`Vue`实例

我们用vue脚手架搭建项目的时候，只会创建一个Vue实例，那实际情况到底是Vue只能创建一个实例，还是可以多个，话不多说，我们看代码：

<body>
<div class="app1">
    {
  {message}}
</div>
<div id="html">
    非vue代码
</div>
<div class="app1 app2">
    {
  {message}}
</div>
<script>
<!-- 初始化第一个实例-->
var vm1 = new Vue({
        el:".app1",
        data:{
            message: "vue第一个实例",
            commont:"公用data"
        }
    });
<!-- 初始化第二个实例-->
var vm2 = new Vue({
    el:".app2",
    data:{
        message: "vue第二个实例",
    }
});
</script>

</body>