7.VUE实例的生命周期钩子

最新推荐文章于 2022-09-16 17:51:11 发布

前端杨小白

最新推荐文章于 2022-09-16 17:51:11 发布

阅读量362

点赞数 3

分类专栏： VUE学习笔记

本文链接：https://blog.csdn.net/yangwqi/article/details/107933362

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

生命周期函数：就是VUE实例在某一个时间点会自动执行的函数生命周期函数直接定义在VUE的实例上并不定义在methods中

new Vue：创建一个VUE的实例 ==>

Init Events&Lifecycle：初始化事件和生命周期相关的内容

beforeCreate：当最基础的初始化【Init Events&Lifecycle】完成的时候【VUE实例部分初始化】 VUE会自动执行beforeCreate函数

Init injections&reactivity：VUE会处理外部注入及双向绑定相关的内容当这部分初始化也完成时VUE实例的初始化操作基本全部完成

created：VUE的初始化操作基本全部完成时会自动执行create函数

Has "el" option?：询问VUE实例中是否有"el"选项

NO【when vm.$mount(el) is called】：

YES【Has "template" option?】：询问VUE实例中是否有"template"选项

NO【Compile el's outerHTML as template】：VUE实例没有"template"选项会将el元素中的HTML元素做模板

YES【Compile template into render function】：VUE实例有"template"选项会用模板进行渲染

beforeMount：在页面渲染之前会自动执行beforeMount函数模板和数据相结合即将挂在在页面上的一瞬间之前执行的函数【hello world并未被渲染到页面上】

create vm.$el and replace "el" with it：模板和数据相结合生成的DOM元素挂载到页面上

mounted：DOM元素挂载到页面上自动执行mounted函数【hello world已经渲染到页面上】

when vm.$destroy() iscalled：当vm.$destroy()函数被调用【销毁组件】时

beforeDestroy：在组件即将被销毁时beforeDestroy函数会被执行

destroyed：当组件完全销毁之后destroyed函数会被执行

when data changes：当时数据发生改变时

beforeUpdate：当时数据发生改变还没重新渲染之前beforeUpdate函数会被执行

updated：当时数据发生改变重新渲染之后updated函数会被执行

Vue 实例生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE实例生命周期函数</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 创建VUE的实例并与上面的元素进行关联
var vm=new Vue({
    el:'#app',
    template:"<div>{{test}}</div>",
    data:{
        test:"hello world"
    },
    beforeCreate(){
        console.log("beforeCreate")
    },
    created(){
        console.log("created")
    },
    beforeMount(){
        console.log(this.$el)
        console.log("beforeMount")
    },
    mounted(){
        console.log(this.$el)
        console.log("mounted")
    },
    beforeDestroy(){
        console.log("beforeDestroy")
    },
    destroyed(){
        console.log("destroyed")
    },
    beforeUpdate(){
        console.log("beforeUpdate")
    },
    updated(){
        console.log("updated")
    },
})
</script>
</body>
</html>