Vue通过ES6的export\import导入模块引发的实例重复问题

Question

我在一个js文件中实例化了一个vue对象，包括两个局部组件，然后我用export导出了这两个组件的对象(注意我此时挂载的是id=app的一个div)如下所示：

//局部组件
const search_input = {
    props:[..]
    ...
};
const book_list = {
      ...
};

//实例Vue对象
const app = new Vue({
    el:"#app",
    data:{
        bookList:[]
    },
    components:{
        "search-input":search_input,
        "book-list":book_list
    },
    methods:{
        ...
    },
    created() {
        axios.get('book.json')
        .then((res)=>{
            this.bookList = res.data
        })
    },
});

export  { book_list , search_input };

然后我在另一个js文件中通过import导入这两个组件，并且在这另一个js文件中使用（注意此时我实例化挂载的也是一个id=app的div，但是和上面的不是同一个html文件。也就是说是两个独立的HTML和两个独立的js文件。）。如下所示：

import { book_list , search_input } from './vueFile.js';

const app = new Vue({
    el:"#app",
    data:{
        search_val:"",
        list:[]
    },
    components:{
        "search-input":search_input,
        "book-list":book_list
    },
    methods: {
        add(){
            alert(this.list)
        }
    },
    created(){
        var search_val = location.search.slice(1);
        this.search_val = decodeURIComponent(search_val);
        console.log(this.list)
        axios.get('book.json')
        .then((res)=>{
            res.data.map((value,index)=>{
                if(value.name.includes(this.search_val) == true || 
                    value.author.includes(this.search_val) == true){
                    this.list.push(value);
                }
            })
        })
        
    }
})

这时第二个html和js就出现了问题，各种找不到data中的数据，点击事件也无法触发。最后将第二个html中id为app的div改为app2，Vue实例也挂载在id=app2的div上就解决了。
但我有个疑问，我通过import只引入了两个组件的模块，难道实例的Vue也引入了？不然为什么两个完全独立的html文件和js文件会因为这个产生冲突。求大神解答...

Answer 1

那当然了，你import一个模块会执行模块内所有代码（你这个就算摇树优化也优化不掉，摇树优化只可能优化掉没有执行的代码，比如写了一个函数没执行这种）