Vue深入-7【Vue中生命周期、组件】

(1).生命周期

1.beforeCreate/created

执行步骤: beforeCreate-created

用途: beforeCreatevux/vuerouter中混入一些全局属性,也可以写数据请求

作用:创建实例

区别:created会比beforeCreate的this多一个_data 访问的时候会做代理直接访问data,也就是说可以访问到我们定义的message信息了

后续步骤:

先判断有没有el 如果传入el了 看传没传templeate 有则生成render函数，如果没有的话则会把app作为模板生成render函数，没有传入el则不会挂载需要通过.$mount进行手动挂载

2.beforeMount/mounted

执行步骤:beforeMount-mounted

用途:这一步就是挂载到页面，就有el template runder的优先级问题 最终替换el

区别:挂载完成之前this中的$el会是指定的el作为模板,挂载完成之后会用真实需要的dom替换之前el的模板dom(前提是template和el共同存在) 在beforeMount的时候this指向的是el绑定的dom mounted指向的就是真是需要的dom了

优先级问题:

如果render函数与el和template都同时存在 则直接找到render,同时存在就跳过template了

render > template > el  渲染优先级

以上生命周期只会走一次且是同步的

3.beforupdate和update

执行步骤:beforupdate-update

用途:更改值得话就会执行befor update 和update(所以不要再updated中再更改值了)

区别:更改前-更改完成

4.destroyed和beforeDestory

执行步骤:beforeDestory-destory

用途:destoryed 和beforeDestory分别是销毁后和销毁前,并没有把dom移除，就是移除一些事件监听watch，销毁之后数据也不是响应式的了

路由切换响应:

在vuerouter中切换得时候也会执行,如果给router-view标签加上keep-alive则不会销毁了

(2).组件间的周期

1.父子组件的执行顺序

父组件不会直接挂载上去，会先初始化，最后先挂载子组件再挂载父组件再挂载到页面上

实例从里到外，挂载从里到外

执行顺序:

parent before create > parent createad > parent before mount >

child before create > child createad > child before mount >

child mounted > parent mounted

render添加后顺序:

parent before create > parent createad > parent before mount > parent render

child before create > child createad > child before mount > child render

child mounted > parent mounted

render是先父亲后子的，只不过挂载是先子后父的

(3).访问函数中的对象

如果直接访问，会造成数据作用域一致，点击上面就会操作下面的数据，不是各个独立的,所以才要访问函数中的对象

<script>
    let data = {
        count:1
    }
    Vue.component('my-component',{
        template:`
            <div>
                <div @click="count--">-</div>
                <div>{{count}}</div>
                <div @click="count++">+</div>
            </div>
        `,
        data(){
            return{
                count:1
            }
        }
    })

(4).子组件由来

子组件是通过构造函数而来的，而构造函数是通过Vue.extend来的 通过vue.extend来创造构造函数

下面的配置项填入Ctor和上面就是一致的效果了

let Ctor = Vue.extend({
        template:`
            <div>
                <div @click="count--">-</div>
                <div>{{count}}</div>
                <div @click="count++">+</div>
            </div>
        `,
        data(){
            return{
                count:1
            }
        }
})
Vue.component('my-component',Ctor)