用vuecli创建中有runtime-compiler和runtime-only 的区别

两者的src文件下的main.js不同

runtime-compiler的main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

---

runtime-only的main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

---

template解析成ast抽象语法树 ,然后进行编译,用render函数创建出许多的虚拟dom节点 再呈现到界面上.

---

可以看到runtime-only直接用render函数跳过template解析成ast抽象语法树然后再编译成render函数这两步 所以速度很大的提升,并且使整个文件更小了
render中的h其实就是createElement()

---

箭头函数的this
一般的函数的this都是window, 如果是对象调用的指向对象

箭头函数的this:本身没有this,向父级找this, 跟父级的this指向相同