首页 > 其他分享 >Vue的生命周期

Vue的生命周期

时间:2023-05-17 11:46:18浏览次数:35  
标签:生命周期 console log 实例 调用 Vue 页面

var vm = new Vue({
    el: "#app",
    // 在基础初始化完成之后,数据和事件配置之前调用
    beforeCreate(){
        console.log("beforeCreate")
    },
    // 初始化全部完成,实例创建完成后立即调用
    created(){
        console.log("created")
    },
    // 挂载之前调用
    beforeMount(){
        console.log("beforeMount")
    },
    // 页面挂载后调用
    mounted(){
        console.log("mounted")
    },
    // 数据有更新,页面渲染之前调用
    beforeUpdate(){
        console.log("beforeUpdate")
    },
    // 数据有更新,页面渲染完毕后调用
    updated(){
        console.log("updated")
    },
    // 实例销毁前调用
    beforeDestroy(){
        console.log("beforeDestroy")
    },
    // 实例销毁后调用
    destroyed(){
        console.log("destroyed")
    }
})

 

标签:生命周期,console,log,实例,调用,Vue,页面
From: https://www.cnblogs.com/mamilaila/p/17408128.html

相关文章

  • VUE前端随笔计2
    又是小白记录问题的一次,老规矩,还是抄别人的代码来改。 在表标签中找到了一个点击事件定位代码,对比别人的,发现自己的删多了,把这个补充回去就行了,具体意思不太明白,大概是给这个模型里面填充这行数据。 ......
  • 局部添加加载中效果loading (vue+elementUI)
    产品需求:有时候我们不想为整个页面添加loading效果。只想给局部区域添加loading效果。(这效果就不揍产品了)在一个表格数据加载时,因为需要连接其它东西,所以后台接口返回数据需要较长时间,因此添加局部Loading效果,增加用户体验度,最开始使用下面代码,直接放到<el-table>中,测试......
  • vscode中vue项目中修改.vue文件名后报错
    报错误信息:Alreadyincludedfilename'.../xxx.vue'differsfromfilename'.../xxx.vue'onlyincasing.Thefileisintheprogrambecause:Importedvia'…/xxx.vue'fromfile'.../xxx.vue'Rootfilespecifiedforcompi......
  • Vuex的使用
    1、Vuex介绍1.1、概念专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件之间的通信。1.2、什么时候使用Vuex多个组件共享同一个状态(数据)的时候。1.3、Vuex原理图注意:图中没有体现......
  • Vue 报错-4058 ENOENT: no such file or directory的原因和解决办法
    原因是我在上一级目录打开的cmd然后npmrunserve 需要进到app内run一下 ......
  • vue中使用wangEditor在设置工具栏的显隐
    前段时间为了富文本在wangEditor和tinyMCE中犹豫,虽然最后选择用tinyMCE,但是wangEditor的文档也是去看了的。wangEditor中文文档在这里。由于项目中需要的工具栏并不多,需要将部分工具栏隐藏,然后我将这两个富文本框的文档都看了一下。这里主要说一下wangEditor富文本框的工具栏的......
  • 【Vue2.x源码系列08】Diff算法原理
    什么是虚拟DOMDOM是很慢的,其元素非常庞大,当我们频繁的去做DOM更新,会产生一定的性能问题,我们可以直观感受一下div元素包含的海量属性在Javascript对象中,虚拟DOM表现为一个Object对象(以VNode节点作为基础的树)。并且最少包含标签名tag、属性attrs和子元素对象children三个属......
  • Vue
      ......
  • VUE- history模式发布项目部署
    VUE-history模式发布项目部署 环境:vue项目 发布后,通过nginx部署到docker容器内。如需要去掉路径中的#/ 则需要使用history模式发布。1. 修改路由的配置文件constrouter=newRouter({base:process.env.BASE_URL,scrollBehavior:()=>({y:0}),mode:'......
  • vue2 + fabric.js 实现撤销、恢复效果
    全部代码<template><div><canvasid="canvas"width="400"height="400"style="border:1px"></canvas><button:disabled="!canUndo"@click="historyState(stateIndex-1)......