用vue-cli创建的项目中index.html里的id="app"与App.vue中的id="app"为何不会冲突

通过vue-cli创建vue项目时，默认的渲染主页是public/index.html文件，它里有一个id=“app”的div元素。而在主组件src/App.vue的template里也有一个id=“app”的根元素，为何在渲染时两者不会冲突？
原因如下：
作为入口文件的src/main.js，创建了应用的vue根实例。
根实例的el选项或者实例方法$mount()的参数，提供了一个已经存在的DOM元素作为挂载Vue实例的挂载目标。此处挂载元素是index.html中的id为’#app’的div元素。
根实例的render选项，接收createElement方法作为第一个参数用来创建VNode。而createElement又接收APP组件作为参数。
render渲染函数生成的VNode将会替换掉挂载元素，即App.vue组件的模板内容将会替换掉index.html中的挂载元素’#app’。最终渲染出来的页面中的’#app’元素是App.vue组件中的。
注：rende渲染函数是字符串模板template的代替方案。使用构建工具时，vue.js使用的是不包含编译器的运行时版，而template一定要通过编译器编译成渲染函数，所以就用render替代了template。