04/006 life cycle.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <div id="app">
    </div>
    <script>
    var MyComponent = Vue.extend({
        template: '<div>我是 vue 的组件实例，有看到吗？</div>',
        init: function() {
            console.log('生命周期 init，在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化。');
        },
        created: function() {
            console.log('生命周期 created，在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。')
        },
        beforeCompile: function() {
            console.log('生命周期 beforeCompile, 在编译开始前调用。');
        },
        compiled: function() {
          console.log('生命周期 compiled, 在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。')
        },
        ready:function (){
          console.log('生命周期 ready, 在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。');
        },
        attached:function (){
          console.log('生命周期 attached, 在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。');
        },
        detached:function(){
          console.log('生命周期 detached, 在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。')
        },
        beforeDestroy:function (){
          console.log('生命周期 beforeDestroy , 在开始销毁实例时调用。此时实例仍然有功能。')
        },
        destroyed:function(){
          console.log('生命周期 destroyed, 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。如果有离开过渡，destroyed 钩子在过渡完成之后调用。');
        }

    })

    var myComponentInstance = new MyComponent()

    // 控制台中，可以看到
    // 执行 myComponentInstance.$mount('#app')
    // 执行 myComponentInstance.$destroy('#app')
    </script>
</body>

</html>