vue的生命周期

Vue生命周期:一个Vue实例从创建到销毁的过程。 Vue组件也可以看成一个Vue实例。

Vue实例做了什么:

        将模板内容编译,替换掉原有的html节点

        1:模板内容:由template选项确定。

        2:编译:将模板编译成真实的DOM,渲染/挂载到html中。

        3:原有的html节点:由el选项确定。

created之前做了什么:

  initLifecycle(vm) //初始化生命周期


  initEvents(vm) //初始化事件


  initRender(vm) //初始化渲染


  callHook(vm, 'beforeCreate')  

   /**initInjections与initProvide配套使用,将父组件_provided定义的值,通过inject注入到子组 
     件,且这些属性不会被观察
     栗子:<div id="app">
              <p>{{message}}</p>
              <child></child>
            </div>
            <script type="text/javascript">
                var vm = new Vue({
                    el: '#app',
                    data: {
                         message: '第一个vue实例'
                     },
                     components: {
                         child: {
                            template: "<div>{{a}}</div>",
                            inject: ['a']
                         }
                      },
                     provide: {
                         a: 'a'
                     }
                 })
            </script> */

 initInjections(vm) 

  /*主要操作数据 props、methods、data、computed、watch 以及Observer、 Dep和Watcher
   数据代理   vm.msg 实际*问的是vm._data.msg    vm.$data实际访问的是vm._data  
   _data是Vue实例的私有属性 */

  initState(vm) 

  initProvide(vm) 

  callHook(vm, 'created')


//判断用户是否传入了el选项,传入了则调用mount函数,没传入则不执行mount相关的生命周期
//需要手动调用$mount方法挂载时  mount相关的生命周期被调用了 进入下一个生命周期阶段
  if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    } 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        app
    </div>
</body>
<script>
    const vm = new Vue({
        // el:"#app",//指定渲染到哪个节点

        data:{
            msg:'hello vue'
        },

        //编译模板,挂载到(替换掉)原有的节点(el指定的html节点)
        // 1:编译模板  解析template中的内容 将{{msg}}替换成hello vue 变成 <div>hello vue</div> 
        // 2: 将编译后的结果<div>hello vue</div>,挂载到el指定的dom元素 <div id="app"></div>
        
        template:'<div>{{msg}}</div>',
    
        methods:{
            init(){
                console.log("方法");
            }
        },

        /*
            beforeCreate
            vue实例刚创建出来,还没有初始化Vue实例中的数据和方法 
            不可以访问 data和 methods
            获取不到$el
        */
        beforeCreate :function() {
             console.log(this.msg);//undefine
             console.log(this.init);//undefine
     
        },

       
        /*
            vue实例创建完成
            created函数 完成对data的里的数据初始化,响应式 最早可以处理数据相关逻辑的生命周期函数
            可以访问data,methods ,props,compute,watch
            获取不到$el,不可以进行dom操作
            
        */
        created: function(){
            console.log(this.msg);//vue
            console.log(this.init);//方法
            console.log("created...",this.$el);//undefined
            

        },
        
        /*
           beforeMount
           完成了模板的编译,根据data中的数据和指令生成了html,还没有渲染 仅在内存中,但是还没 
           有挂载到页面中
           最后一次处理data数据的生命周期函数
        */
        beforeMount () {
            
            console.log("beforeMount...",this.$el); <div id="app">app</div>

        },

        /*
            手动写render, return 的节点 代替了templalte的模板内容
            没有手写render 会根据template生成render函数 
        */
        render(h){
            return h('h2',{},this.msg)
        },
        
        /*
            调用mouted时,表示Vue已经编译好了最终模板,可以拿到渲染之后的内容了   
            进行dom操作
        */
        mounted () {
            console.log("mounted...",this.$el);//挂载后 模板编译后的内容替换掉原有的el指定的dom元素

        }, <h2>hello vue</h2>

        

        beforeUpdate () {
            console.log(this,"beforeUpdate");
        },
        updated () {
            console.log(this,"updated");
            
        },
        beforeDestroy () {
            console.log(this,"beforeDestroy");
        },
        destroyed () {
            console.log(this,"destroyed");
            
        }
        

        

    })


    /*
        没有指定el的内容时,需要手动调用mount 触发beforeMount,mount生命周期函数
    */
     vm.$mount('#app')
</script>
</html>

上一篇:linux学习(2)


下一篇:vue+element表单校验封装