vue-实例生命周期钩子(不太明白)
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
Vue提供的可以注册的钩子都在上图片的红色框标注。 他们分别是:
- beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
- mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
vue-实例生命周期钩子(不太明白)的更多相关文章
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 前端(二十)—— vue介绍:引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- Vue实例生命周期+vueRoter
Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- Vue_(组件)实例生命周期钩子
Vue生命周期中文文档 传送门 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这 ...
- vue实例生命周期
实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- vue实例生命周期详解
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...
- 【Vue实例生命周期】
目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpda ...
随机推荐
- TortoiseGit拉取或推送,输入账号密码后提示 HTTP Basic: Access denied fatal: Authentication failed 解决方案
TortoiseGit拉取或推送项目,输入账号密码后,提示 HTTP Basic: Access denied fatal: Authentication failed. 大体意思是,HTTP基本认证 ...
- kubernetes集群pod使用tc进行网络资源限额
kubernetes集群pod使用tc进行网络资源限额 Docker容器可以实现CPU,内存,磁盘的IO限额,但是没有实现网络IO的限额.主要原因是在实际使用中,构建的网络环境是往超级复杂的大型网络. ...
- java static关键字和代码块
static关键字 代码块 方法重写 1. 方法重写的特点: 2. 注意事项: static关键字 为什么需要学习static关键字? 针对某一个变量属于类而不属于某一个具体的对象的时候,我们可以考虑 ...
- c#检测是否存在数据库(SQL SERVER)
private static bool CheckDatabaseExists( string databaseName) { { string sqlCreateDBQuery; bool resu ...
- 基于vue项目一键国际化通用方案: vue-i18n + i18n-vue-cli(命令行工具)
鉴于公司有做的国际化需求,对于公司的vue项目,觉得页面还是挺多的.刚开始觉得很简单,就是把vue文件中的中文,替换成变量,提取成一个文件就可以了,谁知道人肉的提取的部分确实太痛苦了,而且容易出错.最 ...
- MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates)
转载于: MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates) 虽然 [Display(Name="XX ...
- 2019-泰迪杯c题数据处理,WGS-84(世界标准地理坐标系) 转为 BD-09(百度地理坐标系)
2019-泰迪杯c题数据处理,WGS-84(世界标准地理坐标系) 转为 BD-09(百度地理坐标系) 本次泰迪杯的数据为经纬度数据,并且题目给的是WGS-84(世界标准地理坐标系)格式的,所有如果调用 ...
- 第一次远程ubuntu用c写Hello Word出现的问题
2019-03-26 21:48:48 之前已经学过c语言,但是一直是在win10上用VC++6.0来写代码的,现在想尝试在linux下用c语言 其实主要目的是来学习linux 1.问题: 在ubun ...
- 后台启动mysql
https://blog.csdn.net/codemacket/article/details/77719323
- highcharts数据标签显示在柱状图里面解决办法
1.现象:当各项占比相同时,数据显示在柱状图里面 2.解决方法: 3.效果