vue生命周期简介和钩子函数

wzyplus 发布于2019-08-23 17:01 / 885人阅读

摘要：简单的来说一下的生命周期函数和并未初始化完成了数据的初始化，没有完成了虚拟和初始化完成了真实和初始化对比下和在模板渲染成前调用，即通常初始化某些属性值，然后再渲染成视图。

简单的来说一下vue的生命周期函数

beforeCreate // el 和 data 并未初始化

created // 完成了data数据的初始化，el没有

beforeMount // 完成了虚拟el和data初始化

mounted // 完成了真实el和data初始化

beforeUpdate

updated

beforeDestroy

destroyed

对比下create和mounted

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选

总结

我们经常使用的地方

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，在这发起后端请求，拿回数据，配合路由钩子做一些事情
mounted ： 如果需要获取dom的可以在这里操作

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103669.html

vue.js简介和生命周期

摘要：五当修改实例的时，就会自动帮我们更新渲染视图，在这个过程中，提供的钩子函数，在检测我们要修改数据的时候，更新渲染视图之前就会触发钩子函数。本文详情:http://www.zymseo.com/vue/1、Vue.js框架是什么，为什么学习它？世界上最好的MVVM框架： MVVM可以拆分成：View --- ViewModel --- Model三部分 showImg(https...

wizChen 2019-08-26 12:02 评论0 收藏0
再谈Vue的生命周期----结合Vue源码

摘要：中的生命周期函数也可以称之为生命周期钩子函数，在特定的时期，调用特定的函数。吊起钩子函数调起钩子函数问题为什么是一个数组卸载组件，会触发一个这行代码之后发生了什么背后实现原理。简介关于Vue的生命周期函数，目前网上有许多介绍文章，但也都只是分析了表象。这篇文档，将结合Vue源码分析，为什么会有这样的表象。 Vue中的生命周期函数也可以称之为生命周期钩子（hook）函数，在特定的时期...

KavenFan 2019-08-23 12:16 评论0 收藏0
Vue组件定义

摘要：组件结构基础知识属性属性维护一个组件内部状态，其余组件正常情况下不可见。方案选择单文件一行的简单结构常规的选择前边两种方案解决不了时候的选择灵活性高注意不论选择哪一种方案，定义模板时，一定要有一个非标签元素作根，有且仅有一个。简介组件是可复用的 Vue 实例。本质上是一个对象，该对象包含data、computed、watch、methods、filters以及生命周期钩子等成员属...

imtianx 2019-08-23 10:41 评论0 收藏0
详解 mpvue 小程序框架及和原生的差异

摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

IamDLY 2019-08-26 13:52 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0