首页 > 其他分享 >vue学习七之生命周期

vue学习七之生命周期

时间:2023-10-19 21:00:52浏览次数:32  
标签:生命周期 console log Vue 学习 修改 vue 阶段

1.vue的四个生命阶段

 

2.vue的八个钩子

  (1) beforeCreate:创建阶段前,script数据尚未加载

  (2) created:创建阶段已完成

  (3) beforeMount:挂载阶段前,开始通过数据进行页面渲染

  (4) mounted:挂载阶段完毕

  (5) beforeUpdate每次修改会经历本阶段,本阶段数据已经修改画面尚未渲染

  (6) updated:每次修改会经历本阶段,本阶段数据已经修改画面也渲染完成

  (7)beforeDestroy:Vue开始销毁

  (8)destroy:Vue销毁完毕

3.vue的代码显示

    </script>
    <div id="app14">
        <button @click="num = num+1">++</button>
        <span>{{ num }}</span>
    </div>
    <script>
        const app14=new Vue({
            el:'#app14',
            data:{
                num:0
            },
            beforeCreate(){
                console.log('beforecreate 创建阶段前,script数据尚未加载')
            },
            created(){
                console.log('created 创建阶段已完成')
            },
            beforeMount(){
                console.log('beforeMount,挂载阶段前,开始通过数据进行页面渲染')
            },
            mounted(){
                console.log('mounted 挂载阶段完毕')
            },
            beforeUpdate(){
                console.log('beforeUpdate 每次修改会经历本阶段,本阶段数据已经修改画面尚未渲染')
            },
            updated(){
                console.log('updated 每次修改会经历本阶段,本阶段数据已经修改画面也渲染完成')
            },
            beforeDestroy(){
                console.log('beforeDestroy Vue开始销毁')
            },
            destroyed(){
                console.log('destroyed Vue销毁完毕')
            }
        })
    </script>

 

标签:生命周期,console,log,Vue,学习,修改,vue,阶段
From: https://www.cnblogs.com/cocotun/p/17775624.html

相关文章

  • autoML学习
    使用工具auto_ml它主要将机器学习中所有耗时过程自动化,如数据预处理、最佳算法选择、超参数调整等,这样可节约大量时间在建立机器学习模型过程中。进行自动机器学习使用的库为pycaretpycaret——》开源机器学习库不好用从数据准备到模型部署一行代码实现可以帮助执行端到端机器学习......
  • 机器学习随笔
    Ttask 任务P performancemeasureP度量系数Eexperience经验监督学习回归与分类问题连续 离散无监督学习没有标签的分类例如新闻分类将相关的新闻都放在一起聚类算法鸡尾酒会问题麦克风中两个声音进行分离代......
  • 《动手学深度学习 Pytorch版》 9.5 机器翻译与数据集
    机器翻译(machinetranslation)指的是将序列从一种语言自动翻译成另一种语言,基于神经网络的方法通常被称为神经机器翻译(neuralmachinetranslation)。importosimporttorchfromd2limporttorchasd2l9.5.1下载和预处理数据集“Tab-delimitedBilingualSentencePairs”......
  • Vue源码学习(十二):列队处理(防抖优化,多次调用,只处理一次)
    好家伙, 本篇讲的是数据更新请求列队处理 1.一些性能问题数据更新的核心方法是watcher.updata方法实际上也就是vm._updata()方法,vm._updata()方法中的patch()方法用于将新的虚拟DOM树与旧的虚拟DOM树进行比较,并将差异更新到实际的DOM树上.这一步是非常消耗性能的 2.......
  • python学习笔记-异步非阻塞web框架
    一、异步非阻塞框架介绍1、介绍支持异步非阻塞web框架:tornado,nodejs2、定义对比异步IO模块:我们作为客户端向服务端“并发”请求异步非阻塞web框架:针对服务端,希望一个线程处理更多的请求二、tornado异步非阻塞【要点提炼】使用装饰器@gen.coroutine模拟等待,使用特殊的......
  • 第一次博客——分享C语言学习
    今天又是在寝室里学习C语言的一天,学校里老师上课有点水,只能自己学习,幸好有比特鹏哥的帮助,C语言水平稳步增长。今天在鹏哥的带领下,学习了选择语句和循环语句。选择语句学习了if结构和switch结构,个人感觉switch结构虽然适用于多分支比较方便,但整型的限制比较大,很多语句后都不能遗忘br......
  • 构建高效、安全的在线考试系统:基于Spring Boot和Vue的前后端分离之道
    本文介绍了如何使用SpringBoot和Vue构建一个前后端分离的在线考试系统。通过结合这两个流行的技术框架,我们能够快速搭建一个功能完善、易于扩展的系统,提供高效、安全和可靠的在线考试服务。本文将详细介绍系统的架构设计和关键技术实现,并提供相关代码示例。随着互联网的普及,越来越......
  • 基于Python的《计算机组成原理》在线学习平台-计算机毕业设计源码+LW文档
    摘 要随着互联网的发展,通过计算机来学习是当前非常流行的一种学习方式。通过课程虽然可以面对面的进行交流和学习,但是很多时候因为地区和空间的限制会受到很多的影响但是通过网络来进行学习可以打破这一局限性,为此我开发了本基于Python的《计算机组成原理》在线学习平台网站本......
  • openGauss学习笔记-104 openGauss 数据库管理-管理数据库安全-客户端接入之SSL证书管
    openGauss学习笔记-104openGauss数据库管理-管理数据库安全-客户端接入之SSL证书管理-证书替换openGauss默认配置了通过openssl生成的安全证书、私钥。并且提供证书替换的接口,方便用户进行证书的替换。104.1操作场景openGauss默认配置了SSL连接所需要的安全的证书、私钥,用户......
  • 解决vue单页面程序经过hbuilder打包成apk后物理按键会直接退出程序的问题
    解决方法是在项目index.html文件中写入 <script>   document.addEventListener('plusready',function(){     varwebview=plus.webview.currentWebview();     plus.key.addEventListener('backbutton',function(){      ......