Vue el与$mount的区别

先阅读官网：
https://cn.vuejs.org/v2/api/#el
https://cn.vuejs.org/v2/api/#vm-mount

同：均是用来挂载对象的，作用相同，但是使用方法有所差异（如下实例）；
异：el是vue的一个option，$mount是vue的一个实例方法；

/* 此时是未挂载状态，页面是不显示的 */
//此时可以使用下面A或B来挂载，都可以
new Vue({
  router,
  store,
  render: h => h(App)
})

//A指定el option
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
//B使用$mount实例方法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/* 但是下面这种情况只能使用$mount挂载 */
//在vue实例化之后，再进行挂载

//这种方式是错误的，查看el限制（上面picture-el）
const vm = new Vue({
  router,
  store,
  render: h => h(App)
})

vm.$el = '#app';

//可以使用$mount来挂载
const vm = new Vue({
  router,
  store,
  render: h => h(App)
})

vm.$mount('#app')

#如果 render 函数和 template property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库

• 普通html使用vue（在一个html文件中）

{{msg}}

//在普通的html中把vue通过script标签导入的，很好理解：
//此时vue实例中，没有template模板字符串或render函数
//此时就把 
{{msg}}
 提取出来做模板
//而导入的vue就是 runtime-compiler 的

new Vue({
  el: '#app',
  data: {
    msg: 'Hello 生命周期！'
  }
})

• 脚手架使用vue（脚手架版本4，在两个文件中）

  
    
    
    
    
    
  
  
    
    
{{msg}}
    
  

//main.js
//在下面中，因为没有指定template模板字符串或render函数
//所以el把目标的DOM元素提取出来做模板，也就是public/index.html中的 
{{msg}}
//其实这种就是有点绕，原理都是一样的
//el也可以换成 $mount()
//也可以注册router和store
//一般在脚手架中，public/index.html文件是不应该被改变的，所以不会采用这个方法来渲染
new Vue({
  el: '#app',
  router,
  store,
  data() {
    return{
      msg: 'Hello 生命周期！'
    }
  }
})