vue深入解析之render function code详解

<p>{{ct}}</p>
<input v-model="message">
<div v-for="item in items">
{{ item.text }}
</div>
<button v-on:click="bindClick">点我抓同伟</button>
</div>

// js
new Vue({
el: '#app',
data: {
message: '以vue的名义',
items: [{
text: '达康书记'
}, {
text: '育良书记'
}] },
methods: {
bindClick: function() {
this.message = '这就抓同伟去';
},
msg: function() {
return this.message + "这个方法每次都会执行";
}
},
computed: {
ct: function()　{
return this.message + "计算属性并不会每次都执行";
}
}
})

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("ntt " + _s(item.text) + "nt ")])
 }), _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 除了监听组件，还会监听计算属性依赖的属性，一旦属性发生变更，就会执行计算属性方法，并将执行结果赋值给实例作用域下与计算属性方法名相同的属性，这就是直接使用