Vue完整版和运行时版的区别

一、二者的区别

image.png

最佳实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件
思路：
1、保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2、保证开发体验，开发者可直接在Vue文件里写HTML标签，而不写h函数
3、脏活累活让 loader 做，vue-loader 把vue文件里的html 转为 h 函数

二、template 和 render 怎么用

// 需要编译器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

参考尤大的vue教程：https://v3.cn.vuejs.org/guide/installation.html#%E5%AF%B9%E4%BA%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93

三、三步用 codesandbox.io 写 Vue 代码

HLLS`L{IOSGDYNUVZTP~`8O.png

image.png

3RCXAG`KUQDM)C25KE3NEG7.png