• 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>

     

  • 相关阅读:
    艾美捷重组蛋白酶K，无动物源/AF性质和稳定性
    Django: 事务 transaction.atomic
    k8s网络模型介绍：pod内/间通信
    HTTPS(对称加密+非对称加密+证书)
    华为OD机试 - 数字序列比大小 - 贪心算法（Java 2023 B卷 100分）
    跨域的解决方法
    【强化学习】10 —— DQN算法
    一个快速切换一个底层实现的思路分享
    【canal系】canal集群异常Could not find first log file name in binary log index file
    测试开发基础，教你做一个完整功能的Web平台之环境准备
  • 原文地址：https://blog.csdn.net/nullccc/article/details/126190086