用console.log解读Vue源码

前言

本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化.
控制台输出的效果图

请用chrome查看,并打开控制台看效果
演示地址

准备

vue-console.html的创建

下载vue.js文件,在vue-console.html中引入,我写了一个简单的例子,涵盖:初始化视图->点击后更新视图(包括各个钩子函数)
代码如下:

  <script src="./vue.js"></script>
  <div id="app">
    <div id="hi" @click="changeName">{
  {name}}</div>
  </div>
  </div>
    <script>
    var style = 'font-size: 20px;color: blue'
    var vm = new Vue