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

Vue.js开发来源：网络编辑：小编更新时间：2024-12-03 12:00:05 浏览量：19

生命周期函数：就是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>

到此这篇7.VUE实例的生命周期钩子的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： 8.VUE的模板语法

下一篇： 6.VUE实例

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11183.html

相关文章：