vue从入门到精通之基础篇（三）生命周期

生命周期

定义：

每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

钩子函数的执行时间

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

还有两个特殊的（配合使用keep-alive）：activated、deactivated

activated

keep-alive组件被激活时调用

deactivated

keep-alive组件被停用时调用

钩子函数中该做的事情

created

实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。

mounted

实例已经挂载完成，可以进行一些DOM操作

beforeUpdate

可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

destroyed

可以执行一些优化操作

keep-alive

在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

vue从入门到精通之基础篇（三）生命周期相关推荐

vue从入门到精通之基础篇（二）组件
(1).局部组件的使用渲染组件-父使用子组件 1: 创建子组件(对象) var Header = { template:'模板' , data是一个函数,methods:功能,component ...
vue从入门到精通之基础篇（一）语法概要
(1).vue起步 1:引包 2:启动 new Vue({el:目的地,template:模板内容}); options 目的地 el 内容 template 数据 data 保存数据属性数据驱动视 ...
vue从入门到精通之进阶篇（三）axios
基本使用 Axios.method('url',[,..data],options) .then(function(res){ }) .catch(function(err) { } ) 合并请求 t ...
vue从入门到精通之进阶篇（一）vue-router基础
路由原理传统开发方式 url改变后立刻发起请求,响应整个页面,渲染整个页面 SPA 锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据页面不跳转用户体验更好 SPA single ...
vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信
$emit和$on进行组件之间的传值注意:emit和emit和emit和on的事件必须在一个公共的实例上,才能够触发需求: 1.有A,B,C三个组件,同时挂载到入口组件中 2.将A组件中的 ...
vue从入门到精通之高级篇（一）vue-router的高级用法
今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法. 1.路由元信息什么是路由元信息,看看官网的解释,定义路由的时候可以配置 meta 字段可以匹配meta字段,那么我们该如何使用它, ...
vue从入门到精通之进阶篇（一）vue-router：导航守卫
vue-router的导航守卫之在导航完成后获取数据需求:在导航完成之后加载数据.渲染DOM <!DOCTYPE html> <html lang="en"&g ...
vue从入门到精通之进阶篇（五）脚手架vue-cli
vue-cli2.x脚手架的使用参考链接:https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- 安装: npm install -g vue-cli ...
vue从入门到精通之进阶篇（四）模块化工具 webpack
模块化 webpack命令 npm init -y npm install webpack@3.6.0 --save-dev --registry https://registry.npm.taoba ...

vue从入门到精通之基础篇（三）生命周期

生命周期

定义：

钩子函数的执行时间

钩子函数中该做的事情

vue从入门到精通之基础篇（三）生命周期相关推荐

最新文章

热门文章