preTransformNode 前置转换问题

Question

// model.js
/**
 * Expand input[v-model] with dyanmic type bindings into v-if-else chains
 * Turn this:
 *   <input v-model="data[type]" :type="type">
 * into this:
 *   <input v-if="type === 'checkbox'" type="checkbox" v-model="data[type]">
 *   <input v-else-if="type === 'radio'" type="radio" v-model="data[type]">
 *   <input v-else :type="type" v-model="data[type]">
 */

1、preTransformNode 是将 input 的指令 v-model 处理成 3种情况，这里为什么要将 checkbox radio 分开来呢，其实 <input :type="type" v-model="data[type]"> 这种情况可以包括处理上面2条的情况呀？

Answer 1

ustbhuangyi 2019-02-20 13:08:53

<input v-model="data[type]" :type="type"> 这种是动态绑定，而要把它处理成三种情况，是因为编译阶段会针对 checkbox 和 radio 做特殊的处理：

如果不这么处理的话是没法得到 checkbox 和 radio 的，注意这是编译阶段而不是运行时阶段

• 慕娘6538821 #1

  老师编译阶段是指我们在写代码打包成js文件的过程吧， 这个跟运行时有什么不同吗

• ustbhuangyi 回复 慕娘6538821 #2

  这里的编译特指把  Vue 的模板转换 render 函数的过程，编译可以离线运行（使用 vue-loader），也可以在线运行（使用带编译版本的 Vue.js）。