export default {
// ...
// 在组件初始化时调用,可以简单理解为页面加载时
created () {
// 存在 localStorage 的缓存内容
if (localStorage.data) {
this.myData = JSON.parse(localStorage.data)
}
else {
// 页面无缓存内容时,初始化数据并写入缓存
this.initData()
}
}
// 在组件销毁前调用,但这并不能监听到页面退出的事件
beforeDestory () {
// 在此同样可对 localStorage 做一些处理
}
}
export default {
beforecreate() {
// 创建前状态
}
created () {
// 创建完毕状态
}
beforeMount(){
// 挂载前状态
}
mounted(){
// 挂载结束状态
}
}
 

Vue 封装的组件生命周期钩子的更多相关文章

  1. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  2. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  3. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  4. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  5. 前端(二十)—— vue介绍:引用vue、vue实例、实例生命周期钩子

    vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...

  6. vue 学习一 组件生命周期

    先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...

  7. 详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...

  9. Vue 的父组件和子组件生命周期钩子执行顺序是什么

    加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-&g ...

随机推荐

  1. windows下libcurl+openssl编译与使用配置

    之前使用过libcurl, 编译也是最简单的版本, 不需要openssl, 即不需要支持https, 所以编译和使用都很正常. 但要使用openssl就很麻烦了, 我花了差不多两天去编译和调用, 记录 ...

  2. AngularJS 实现 Table的一些操作(示例大于实际)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script ty ...

  3. csharp: DataTable结构相同的比较

    )
 ) * pageSize;
 ; i++)
 {
 DataRow newdr = newdt.NewRow();
 DataRow dr = dt.Rows[i];
 foreach (Dat ...

  4. Csharp and Vbscript: Encryption/Decryption Functional

      1 /// <summary>   2     /// 塗聚文   3     /// 20130621   4     /// 自定义字符串加密解密   5     /// < ...

  5. Revolution of Unix

  6. arcengine自己做一个工具Tool放到工具箱中

    // Copyright 2010 ESRI // // All rights reserved under the copyright laws of the United States // an ...

  7. 21_AOP_Advice增强2(异常、引介)

    [异常抛出增强] 异常抛出异常最适合的应用场景:事务管理. 当参与事务的某个Dao发生异常时,事务管理器就必须回滚事务. [异常抛出增强 例子] [操作数据库的Dao类:PersonDao.java] ...

  8. canvas入门(一)

    canvas是HTML 5中非常重要的一个标签,关于它的功能和使用方法在这我就不一一细谈了,毕竟网上相关知识太多,而且自认为如果是我总结那些知识会让读者看的更乱,所以我就不白费力气了,贴上链接:htt ...

  9. Angular js 过滤器 笔记(转自菜鸟教程)

    1.uppercase,lowercase 大小写转换 {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ ...

  10. Selenium2学习(四)-- xpath定位

    前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...