vue中renderfunctioncode有什么用

// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成render function code
const code = generate(ast, options)

// 编译入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件

//template
 
  
普通属性：{{ message }}
  
{{msg()}}
  
{{ct}}
  
  
   {{ item.text }}
  

render function code 解析

debug 拿到生成的 render function code（当然也可以通过 webpack 的 vue-loader 编译之后的 dist 文件拿到，此处省略1000字）

with(this) {
 return _c('div', {
  attrs: {
   "id": "app"
  }
 },
 [_c('p', [_v("普通属性：" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _c('input', {
  directives: [{
   name: "model",
   rawName: "v-model",
   value: (message),
   expression: "message"
  }],
  domProps: {
   "value": (message)
  },
  on: {
   "input": function($event) {
    if ($event.target.composing) return;
    message = $event.target.value
   }
  }
 }), _v(" "), _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 }), _v(" "), _c('button', {
  on: {
   "click": bindClick
  }
 },
 [_v("点我出奇迹抓同伟")])], 2)
}

甭看这段代码有点怪，但是如果告诉你，这段代码，注入 data 执行，生成的就是传得玄乎其玄的虚拟 dom 树，然后再来一本正经的解（cai）读(ce)一下，你又会觉得这段代码其实没有这么晦涩难懂。ok，结合 demo
来看看，模板相关指令都被解析成什么了：

      1） {{messge}} 解析成了 _s(message) ，果断认为这个 _s 就是 toString

      2） {{msg()}} method 解析成了 _s(msg()) ，可见每一次 render, msg 方法都会被执行一遍（即使最终没有被反应到真实 dom 上），这就是计算属性存在的意义

      3） {{ct}} 计算属性依然被解析成了 _s(ct) ，虽然计算属性可以称之为属性，但是形式上毕竟还是方法，是不是觉得比较奇怪？其实 watcher 除了监听组件，还会监听计算属性依赖的属性，一旦属性发生变更，就会执行计算属性方法，并将执行结果赋值给实例作用域下与计算属性方法名相同的属性，这就是直接使用 _s(ct) 而不是 _s(ct()) 就能正确引用计算属性值的原因，计算属性快就快在了这里

      4） v-for="item in items" 被解析成了

 _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 })

可见 _l 跟 for-each 很类似

      5) 至于 v-on:click 则解析成了

_c('button', {
  on: {
   "click": bindClick
  }
 }

      6) 再来看看 _c, c->create->createNode, 假设这个方法就是创建虚拟节点，回头看上述代码，是不是挺有道理，_c 创建根节点，传入的子节点同样需要这个方法创建。找找源码验证下 src/core/vdom/vnode.js，以下中文注释是我加的

constructor (
 tag?: string, //标签名
 data?: VNodeData, //属性数据，事件监听等
 children?: ?Array, //子节点
 text?: string,
 elm?: Node,
 context?: Component,
 componentOptions?: VNodeComponentOptions
 ) {
 ...
 }

以上是“vue中render function code有什么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！