vue模版编译详情

<div>
   <p>{{message}}</p>
</div>

{
  tag: "div"
  // 节点的类型（1标签，2包含字面量表达式的文本节点，3普通文本节点或注释节点）
  type: 1,
  // 静态根节点
  staticRoot: false,
  // 静态节点
  static: false,
  plain: true,
  // 父节点元素描述对象的引用
  parent: undefined,
  // 只有当节点类型为1，才会有attrsList属性，它是一个对象数组，存储着原始的html属性名和值
  attrsList: [],
  // 同上，区别是attrsMap是以键值对的方式保存html属性名和值的
  attrsMap: {},
  // 存储着该节点所有子节点的元素描述对象
  children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{message}}",
          static: false,
          // 当节点类型为2时，对象会包含的表达式
          expression: "_s(message)"
      }]
    }
  ]
}

`<div><p>{{message}}<p></div>`

// 经过上面的匹配，剩下的字符串部分为：
`<p>{{message}}<p></div>`

// 经过上面的匹配，剩下的字符串部分为：
`{{message}}</p></div>`

// 经过上面的匹配，剩下的字符串部分为：
`</p></div>`

// 经过上面的匹配，剩下的字符串部分为：
`</div>`
第五次截取


结束

function isStatic (node) {
    // expression
    if (node.type === 2) {
      return false
    }
    // text
    if (node.type === 3) {
      return true
    }
    
    return !!(node.pre || (
      !node.hasBindings &&
      !node.if && !node.for &&
      !isBuiltInTag(node.tag) &&
      isPlatfORMReservedTag(node.tag) &&
      !isDirectChildOfTemplateFor(node) &&
      Object.keys(node).every(isStaticKey)
    ))
}

const obj = {a: 100, b: 200}
with(obj) {
     console.log(a)
     console.log(b)
     // console.log(c) // 会报错
}

with(this){return _c('div',_c('p',[_v(message)])])}

const strinGCode = `with(this){return _c('div',_c('p',[_v(message)])])}`

const render = new Function(stringCode)

const compiler = require('vue-template-compiler')
// 插值
const template = `<p>{{message}}</p>`
const result = compiler.compile(template)
console.log(result.render)
// with(this){return _c('p',[_v(_s(message))])}

function installRenderHelpers(target) {
    target._c = createElement
    // 标记v-once
    target._o = markOnce
    // 转换成Number类型
    target._n = toNumber
    // 转换成字符串
    target._s = toString
    // 渲染v-for
    target._l = renderList
    // 渲染普通插槽和作用域插槽
    target._t = renderSlot
    // 通过staticRenderFns渲染静态节点
    target._m = renderStatic
    // 获取过滤器
    target._f = resolveFilter
    // 检查键盘事件keycode
    target._k = checkKeyCodes
    target._b = bindObjectProps
    // 创建文本vnode
    target._v = createTextVNode
    // 创建空vnode
    target._e = createEmptyVNode
    target._u = resolveScopedSlots
    target._g = bindObjectListeners
    // 处理修饰符
    target._p = prependModifier
}