webpack vue-loader

Question

使用自定义webpack打包vue文件
index.js

import avatar from './2.jpg'

var img = new Image()
img.src = avatar

var root = document.getElementById("root")
root.append(img)

import C from './index.vue'
console.log(C,'打印')

import Vue from 'vue'

console.log(new Vue())
console.log(new Vue())
new Vue({
    render:(h) => h(C)/*渲染内容*/
}).$mount(root)/*挂载元素*/

上述代码npm run build 后 页面上只有index.vue里面的内容，没有我引入的avatar这张图片被append到root节点上，页面中id为root的div下面只有index.vue里面的东西这是为什么呢？

Answer 1

Vue 中挂载的本质是替换掉挂载的 DOM 节点，而不是你理解的添加。所以，你第一次 append 图片的时候是添加到了 DOM 中，但是最终挂载的时候，会连这个 DOM 一起替换掉。所以这也是经典的面试题为什么 el 不能是 body、html 标签?，因为它的本质是替换掉 el 对应的DOM。