• VUE 笔记 生命周期函数

     

     1 beforeCreate 和 created

     

    beforeCreate：表示实例完全被创建出来之前,会执行它，注意:在 beforeCreate 生命周期函数执行的时候, data 和 methods 中的 数据都还没有初始化 。

    created: 在 created 中,data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作。

    2 beforeMount 和 mounted 

     

    beforeMount：模板已经在内存中编辑完成了,但是尚未把模板渲染到 页面中，在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。

    mounted：表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了，注意:mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了。

     

    3.updated 和 beforeUpdate

     

    updated：当数据被更新时执行

    beforeUpdate:：当数据在模板中更新后执行

    1. html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>hello worldtitle>
    6.     <script src="https://unpkg.com/vue@next">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="root">div>
    11. body>
    12. <script>
    13.     const app = Vue.createApp({
    14.         data:function(){
    15.             return({
    16.  
    17.             })
    18.         },
    19.         //在实例生成之前会自动执行的函数
    20.         beforeCreate(){
    21.             console.log('before create')
    22.         },
    23.         //在生成实例之后会自动执行的函数
    24.         created(){
    25.             console.log('created')
    26.         },
    27.         //在组件内容被渲染到页面之前执行的函数
    28.         beforeMount(){
    29.             console.log(document.getElementById('root').innerHTML,'beforeMount');
    30.         },
    31.         //在组件内容被渲染到页面之后自动执行的函数
    32.         mounted(){
    33.             console.log(document.getElementById('root').innerHTML,'mount');
    34.         },
    35.         // 当数据发生变化后立刻执行的函数
    36.         beforeUpdated(){
    37.         },
    38.         //当数据发生变化，页面重新渲染后，会自动执行的函数
    39.         updated(){
    40.         },
    41.         template: `
      hello
      `
    42.     })
    43.     app.mount("#root")
    44. script>
    45.  
    46. html>

     

  • 相关阅读:
    Linux上git的基本操作
    合合信息、上海大学、华南理工大学发布业内首个古彝文编码“大字典” ，为古文字打造“身份证”
    吴恩达深度学习笔记（四）——深度学习的实践层面
    Nginx入门到精通2-nginx框架
    Linux 下以其他用户运行程序
    科技云报道：全球勒索攻击创历史新高，如何建立网络安全的防线？
    kaist数据集体验
    mysql 执行计划 type详解
    NFT 推荐｜史蒂夫·青木 NFT 作品集
    ansible安装及快速应用
  • 原文地址：https://blog.csdn.net/nullccc/article/details/126190086