Vue的生命周期

最新推荐文章于 2024-03-04 19:58:55 发布

npc_energy

最新推荐文章于 2024-03-04 19:58:55 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

文章标签： vue生命周期

本文链接：https://blog.youkuaiyun.com/npc_energy/article/details/93912464

Vue的生命周期

Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数
注意：生命周期钩子函数不允许写成箭头函数

初始化：

beforeCreate

组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备
数据没有获得，真实dom也没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行一次

created

组件创建结束
数据得到了，真实dom没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行了一次

beforeMount

组件挂载前
任务：判断el 判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
数据可以获得，但是真实dom还没有渲染
可以进行数据请求，也提供了一次数据修改的机会
执行一次

mounted

组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次
可以进行真实dom的操作了（可以进行第三方库的实例化了）

综上总结：
推荐：

数据请求写在created里面
第三方库实例化往mounted中写

运行中

触发条件：数据更新
beforeUpdate

更新前
重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
这个钩子函数更多的是内部进行一些操作，不多干预
可以触发多次

updated

更新结束
真实dom得到了，数据也得到了（更新后的）
动态数据获取（第三方库实例化）

销毁

触发条件：当组件销毁时：
beforeDestroy

destroyed

Vue的销毁有两种形式

通过开关的形式 - 外部销毁
通过调用 $destroy 方法 - 内部销毁

对比：内部销毁 vs 外部销毁
外部销毁不仅能销毁组件，也能销毁该组件的dom结构
内部销毁只能销毁组件，不能销毁组件的dom结构

作用：
用来做善后的,比如计时器的关闭第三方实例的删除


<body>
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>


Vue.component('Hello',{
   template: '#hello',
    data () {
        return {
            msg: 'hello'
        }
    },
    beforeCreate () {
        console.log('1-beforeCreate')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        
        ----用于检测数据请求---
        // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
    },
    created () {
        console.log('2-created')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
    },
    beforeMount () {
        console.log('3-beforeMount')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
    },
    // render() render函数作用是将 jsx 转换成 vdom 对象模型
    mounted () {
        console.log('4-mounted')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
         // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
    },
// ----------------------- 运行中-----------------------
    beforeUpdate () {
        console.log('beforeUpdate')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        
        // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
    },
    updated () {
        console.log('updated')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        
         // fetch('./data.json')
        // .then( res => res.json())
        // .then( data => this.msg = data )
        // .catch( error => console.log( error ))
        }
    })

// ----------------------- 销毁----------------------

beforeDestroy () {
console.log('beforeDestroy')
},
destroyed () {
console.log('destroyed')
}


new Vue({
el: '#app'
})
</script>