运行后打开console可以看到打印出来的内容 
详细解释生命周期钩子函数
接下来将详细解释生命周期钩子函数。
（1）在beforeCreate和created钩子函数之间的生命周期。
在这个生命周期之间，首先进行初始化事件，然后进行数据观测，此时可以看到在created的时候数据已经和data属性进行了绑定（放在data中的属性的值发生改变时，视图也会改变）。注意：此时还是没有el选项。
（2）created钩子函数和beforeMount间的生命周期
在这一阶段发生的事情还是比较多的。首先会判断对象是否有el选项。如果有就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该Vue实例上调用vm.$mount（el）。此时注释掉代码中的：el：‘#app’，然后可以看到程序运行到created时就停止了， 
接着往下看，template参数选项的有无对生命周期的影响，
（1）如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数。
（2）如果没有template选项，则将外部HTML作为模板编译。
（3）可以看到template中的模板优先级要高于outer HTML的优先级。
注意：el进行DOM绑定要在template之前，因为Vue需要通过el找到对应的outer template。
在Vue对象中还有一个render函数，它是以createElement作为参数的，然后进行渲染操作，并且我们可以直接嵌入JSX，代码如下：
var vm = new Vue({ el:'#app', render:function(createElement){ return createElement('h1','this is createElement') } })
运行程序后可以看到页面渲染的结果
所以综合排名优先级：render函数选项template选项outer HTML。
（1）beforeMount和mounted钩子函数间的生命周期，可以看到此时给Vue实例对象添加$el成员，并且替换掉挂载的DOM元素。在之前console中打印的结果可以看出beforeMount之前el的属性还是undefined。
（2）接下来讲解mounted钩子函数的生命周期。
在mounted之前h1还是通过{{message}}进行占位的，因为此时还没有挂载到页面上，还是在JavaScript中以虚拟DOM的形式存在。在mounted之后可以看到h1的内容发生了变化，如 
（3）beforeUpdate钩子函数和updated钩子函数间的生命周期，如图 
当Vue发现data中的数据发生了改变时，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。我们在console中输入如下信息：
vm.message = '触发组件更新'
此时可以发现触发了组件的更新
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。而destroyed钩子函数在Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会被解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
