Vue之挂载流程与生命周期

Vue之挂载流程与生命周期

一.Vue挂载流程

 <div id="app">
        {{ msg }}
 </div>
</body>
<script>
    let vm = new Vue({
            el: "#app",
            template: "<h1>{{msg}}</h1>", //模板
            render(createElement) { //渲染函数
                return createElement("h3", {
                    class: "h3",
                    style: {
                        color: "red",
                        fontSize: "50px"
                    },
                    // domProps: { //权重太大,不属于虚拟dom结构
                    //     innerHTML: "渲染<p>p标签</p>"
                    // }
                }, ["render渲染", createElement("p", "p标签")]); //添加内容，并且添加一个子元素，p标签
            },
            data: {
                msg: "hello",
            }
        })
        // vm.$mount("#app"); //挂载
        //总结： 二者从使用效果上没有区别， 目的都是将vue实例化的对象挂载到DOM元素上； 指定el， 在模板渲染的时候会将对象渲染到模板中， 如果未指定， vue对象属于‘ 未挂载’ 状态， 需要手动指定挂载， 在对象后面.$mount() 加上dom元素。 简单一句话来概括的话就是生命周期路线的不同， 但是没有影响。
</script>

1.1Vue中的el和mount挂载的区别？

• 二者从使用效果上没有区别，目的都是将vue实例化的对象挂载到DOM元素上；指定el，在模板渲染的时候会将对象渲染到模板中，如果未指定，vue对象属于‘未挂载’状态，需要手动指定挂载，在对象后面 .$mount()加上dom元素。简单一句话来概括的话就是生命周期路线的不同，但是没有影响。

1.2挂载流程

• 首先判断是否有el，有就看是否有template，有就替换模板，没有就把当前元素div#app.outerHTML(<div id="app">{{ msg }}</div>)， —> render渲染，如果没有修改就按照原本的渲染（修改就按照修改的内容渲染） —>Vnode（虚拟dom） —>真实dom
• 没有el就去看是否存在vm.$mount( )挂载 没有就结束 有挂载就继续上面的过程。
  
  权重值：render > template > el

二.Vue的生命周期

  <div id="app">
        {{name}} {{age}}
    </div>

</body>
<script>
    var vm = new Vue({
            el: "#app",
            data: {
                name: "zm",
                age: "18"
            },
            beforeCreate() { //创建之前
                console.log("beforeCreate")
            },
            created() { //创建完成
                console.log("create")
                console.log(this.$data)
                    // 此时已经拿到值，但是没有渲染，所以可以去调用ajax去获取数据
            },
            beforeMount() {
                console.log("beforMount")
                console.log(this.$data)
                console.log(this.$el)
                    // 拿到模板，还没渲染
            },
            mounted() {
                // ajax
                console.log(this.$el) //进行渲染
            },
            beforeUpdate() { //更新之前
                console.log("beforeUpdate")
            },
            updated() { //更新完成
                console.log("updated")
            },
            beforeDestroy() { //注销前
                console.log("beforeDestroy")
            },
            destroyed() { //注销后
                console.log("destroyed")
            }
        })
        // vm.$destroy(); //触发条件： 当组件销毁时
        // console.log(vm)
</script>

它可以总共分为8个阶段：

• beforeCreate（创建前） : 在实例初始化之后，数据观测(data observer，开始监控Data对象数据变化)和初始化事件(init event，Vue内部初始化事件)之前被调用。

• created（创建后） : 在实例已经创建完成之后被调用。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，event事件回调。挂载阶段尚未开始，$el 属性不可见。

• beforeMount(渲染前)：在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

• mounted（渲染后）：在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中，此时一般可以做一些Ajax操作。注意mounted只会执行一次。

• beforeUpdate（更新前） : 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

• updated（更新后） : 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

• beforeDestroy（销毁前） : 在实例销毁之前调用。实例仍然完全可用。

• destroyed（销毁后） : 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。