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

     

  • 相关阅读:
    基于java+SpringBoot+HTML+Mysql传统工艺品销售网站
    程序包 applets.user.service.UserService 不存在-2022新项目
    如何安装Vue
    【Transformer专题】Vision Transformer（ViT）原理 + 代码
    [NSSRound#4] 复现
    如何修复 HTML 中的乱码
    pytorch 常见的网络层（卷积层，池化层，线性层，激活函数）
    NFT Insider #75：The Sandbox 为Avatar 打造特别活动，Ambire 团队发起第一次官方治理投票
    55 零钱兑换
    Vue2父传子、子传父和兄弟间互传
  • 原文地址：https://blog.csdn.net/nullccc/article/details/126190086