vue生命周期

最新推荐文章于 2024-05-18 15:56:08 发布
最新推荐文章于 2024-05-18 15:56:08 发布
阅读量358 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue 生命周期 框架 钩子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Honey_tianming/article/details/82901782
版权

生命周期图示

在这里插入图片描述

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
     <button @click="seen=!seen">Toggle</button>
     <p>{{seen}}</p> 
  </div>
  <script >
// 1.new Vue({})  解释：实例初始化，创建新的vue实例
// 2.Init Events & Lifecycle  初始化所有事件和生命周期钩子，初始化数据观测和加载相应事件。
// 3.beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
// 表示实例数据创建之前的方法
// 4.Init injections & reactivity 初始化依赖注入+相关响应，数据观测 (data observer) 和 event/watcher 事件配置
// 5.created 在实例创建完成后被立即调用。
// 在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
// 然而，挂载阶段还没开始，$el 属性目前不可见。  
// 6.Has 'el' option ? & Has 'template' option ? 判断是否有可以挂载的根标签，
// 注：如果是根实例，就找el元素是否存在；如果是组件，就找template模板是否存在
// 如果根实例被找到==>挂载组件项；
// 如果根实例没有被找到==>确保根实例已经被挂载之后，去找组件项。
// 7.YES ==> Compile template into render function . 如果存在template模板，编译模板然后实现依赖注入。 
//   No  ==> Compile el's outerHTML as template .  如果不存在template模板，编译元素的outerHTML然后作为模板注入。
// 8.beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
// 9.create app.$el and replace 'el' with it. 创建app.$el，并且把相关数据和相关元素绑定到实例上。
// 10.mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。(如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。)
// 11.When data changes ... 当数据开始发生更新改变时
// 12.beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。
// 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
// 13.Virtual DOM re-render and patch  虚拟dom实现重渲染 和相关打补丁。
// 14.updated 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
// 然而在大多数情况下，你应该避免在此期间更改状态。
// 如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
// 注意 updated 不会承诺所有的子组件也都一起被重绘。
// 15.when app.$destory() is called. 当实例被要求销毁时调用
// 16.beforeDestroy() 实例销毁之前调用。在这一步，实例仍然完全可用。
// 17.Teardown watchers and child components and event listeners
// Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
// 18.destroyed()Vue 实例销毁后调用。
// 调用后，Vue 实例指示的所有东西都会解绑定，
// 所有的事件监听器会被移除，所有的子实例也会被销毁。
//19.created和mounted的区别。
//created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
//mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点
//进行一些需要的操作。
    var app = new Vue({
      el:'#app',
      data:{
        seen:true  
      },
      beforeCreate(){
        console.group('--beforeCreate--')
        console.log('el:'+this.$el)
        console.log('data:'+this.$data)
        console.log('seen:'+this.seen)
      },
      created(){
        console.group('--created--')
        console.log('el:'+this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)  
      },
      beforeMount(){
        console.group('--beforeMount--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)   
      },
      mounted(){
        console.group('--mounted--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)     
      },
      beforeUpdate(){
        console.group('--beforeUpdate--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)    
      },
      updated(){
        console.group('--updated--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)     
      },
      beforeDestroy(){
        console.group('--beforeDestroy--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)    
      },
      destroyed(){
        console.group('--destroyed--')
        console.log('el:')
        console.log(this.$el)
        console.log('data:')
        console.log(this.$data)
        console.log('seen:'+this.seen)  
      }  
    })
  </script>  
</body>
</html>

代码打印效果图示

在这里插入图片描述

在这里插入图片描述

Honey-回忆天明
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
Vue生命周期详解
m0_58709145的博客
10-18 1万+
1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载。
Vue-生命周期-销毁
最新发布
m0_73839298的博客
05-18 681
点我n+1</button><button @click="bye">点我销毁vm
【前端】Vue生命周期函数（详细讲解+中文图解）
热门推荐
山赶着山，山山漫漫结成关
08-09 1万+
Vue生命周期函数（详细讲解+中文图解）
Vue 的生命周期 （最全周期）
ikEason_的博客
12-22 8316
最全生命周期 （一定看到最后） Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。 1.实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作 2. 挂载数据，绑定事件等等，然后执行 create
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
Vue生命周期
05-18
Vue相关
vue 实现setInterval 创建和销毁实例
10-15
主要介绍了vue 实现setInterval 创建和销毁实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue都使用那么久了，还不了解它的生命周期吗
CRMEB小程序商城的博客
11-25 6023
前言 我记得尤大曾经说过，你看Vue源码干嘛？你使用Vue又不需要它的源码，你只需要会用就行了！ 但是我们得卷啊，不卷怎么脱颖而出????，我还记得在今年的蓝桥杯群里，有一同届的还不知道哪个大学的哥们，已经在读Vue/React/Node的源码了…作为小菜鸡的我看着大佬侃侃而谈，在群角落里瑟瑟发抖。 最近有在牛客上复习Vue的知识，整理出这篇文章，一是方便自己未来复习，二是希望能够帮助一些跟我一样的朋友们复习一边知识点，学习在什么时候都不晚。 这篇文章会讲到： Vue的生命周期到底是什么 Vue生命周期的
vue的生命周期
杨欢博的博客
11-08 891
什么是生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、 渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创 建到销毁的过程，就是生命周期。 vue的八个生命周期 1. beforeCreate 创建之前 实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作 2.
vue 销毁实例
weixin_45061624的博客
06-15 8274
导入 vue 创建一个VM 实例, 传入配置对象, 了解配置对象中的各个属性 var VM = new Vue({ el: '#app', // 表示当我们new的这个Vue实例, 要控制页面上的那个区域 data: { // data属性中，存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每个页面的数据 message: 'Hello Vue!' }, methods : {}, // 这个methods属性中定义了当前Vue实例所有可用的方法,主要写业务逻辑 compu.
【Vue】vue中VM的生命周期及加载和销毁实例
【敦厚的曹操】的专栏
03-02 1458
将要创建 调用beforeCreate函数 创建完毕 调用 created函数 将要挂载 调用beforeMount函数 挂载完毕（重要） 调用mounted函数 将要更新 调用beforeUpdate函数 更新完毕 调用updated函数 将要销毁（重要） 调用beforeDestory函数 销毁完毕 调用destoryed函数 常用的生命周期钩子： 1.mounted：发送ajax请求、启动定时器、绑定自定义
Vue2.0 Vue生命周期 挂载的流程
yasinawolaopo的博客
12-15 1421
记录的是整个Vue生命周期的挂载流程，里面还记录着Vue生命周期函数
vue 生命周期4 销毁流程 beforeDestroy destroyed
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值