vue生命周期简记

2018-10-10 admin

写在前面

如题,vue的生命周期是vue理解的重要一环,弄明白它不只会加深对vue的理解,在实际开发中也会更加得心应手,在此记录写项目开发中体会到的一些经验,只是总结 并不全面,想要详细学习网上关于vue生命周期学习的文章很丰富

<!–more–>

lifecycle.png

生命周期

  • beforeCreate:创建前,new操作,已绑定事件,还没有数据,不能处理数据
  • created:创建,可以处理数据
  • beforeMounted:挂载前,准备把创建的挂载到el上,有el才去执行挂载 挂载前的el仍是<div id=“app”></div>
  • 有template转化后执行render funcion再去渲染 cli中的.vue文件中的template是通过vue-loader直接转化直接执行render funcion的减少耗时
  • mounted:挂载,挂载后$el就是渲染后的<div>123</div>,挂载前后中间执行render funcion
  • beforeUpdated:更新前,数据变化
  • updated:更新
  • beforeDestroy:销毁前,组件被销毁,或手动销毁
  • destroy:销毁

注: 挂载前的钩子里获取不到el的,想对如data中的数据进行操作最早要在created里; 一般在createdmounted钩子里写一些页面渲染前的操作,比如数据请求; 有些传统的第三方库在使用后需要在组件销毁时手动删除其创建的对象在destroy

<!–more–>

没有代码 最后附上一张以前看到的一张图 生命周期表.png

原文链接:https://segmentfault.com/a/1190000016622552

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42275.html

文章标题:vue生命周期简记

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en...
2017-03-13
回到顶部