美文网首页WEB
VUE生命周期及业务使用场景(总结篇)

VUE生命周期及业务使用场景(总结篇)

作者: 中原丶吴彦祖 | 来源:发表于2020-12-09 22:26 被阅读0次
vue 2.0  VS  vue 3.0

beforeCreate  (组件创建前)

// 实例被创建前执行
 // 执行函数时 data 和 methods 还没有被初始化

当前实例主要做了vm实例一些属性的定义和createElement()方法的封装(创建前,访问不到data当中的属性以及methods当中的属性和方法,可以在当前生命周期创建一个loading,在页面加载完成之后将loading移除)。其实在日常开发中并不常用,描述并不贴切和形象,这篇文章描述的挺详细的推荐--->> beforeCreate()前做了什么

created  (组件创建完成)

// 实例被创建之后执行
 // 执行函数时data 和 methods 初始化完成。但是模板还未开始编辑
 // 运用场景:1) Ajax 异步数据请求 2) 初始化操作

Init (初始化) injections (依赖注入) & reactivity (开始响应),一般通过ajax请求初始化数据。                             当前生命周期执行的时候会遍历data中所有的属性,给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性                                                                                                                                当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上                                                                                                                                                           在当前生命周期中我们可以进行前后端数据的交互(ajax请求)。推荐--->>vue.js中created方法的使用详解

beforeMount  (组件挂载之前)

// 实例挂载前执行
 // 此时模板已经编辑完成到内存中。但是还未渲染到 DOM,固页面未展示

载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Dom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。    **注意此时还没有挂载html到页面上。

mounted  (组件挂载完成)

// 实例挂载后执行
 // 此时已经渲染了DOM,可以调用插件操作 DOM
 // 运用场景:挂载元素内dom节点的获取。可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate  (数据更新之前,虚拟 DOM 打补丁之前)

// 数据更新前执行
 // data 数据有更新时,内存中重新编译了最新模板字符串,但还未重新渲染DOM

状态更新之前调用。当内存中实例的 data 数据更新时触发。此时内存中 data 是最新的,但是还未重新渲染DOM节点。

updated (数据更新之后,虚拟 DOM 渲染完成)

// 数据更新后执行
 // 已经重新渲染 DOM
 // 运用场景:对数据更新作统一逻辑业务处理

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

待续

相关文章

  • VUE生命周期及业务使用场景(总结篇)

    beforeCreate (组件创建前) // 实例被创建前执行 // 执行函数时 data 和 methods ...

  • vue-cli 注意事项

    安装 vue-cli使用scss vue-cli模板 vue 生命周期 一篇比较好的vue 生命周期介绍[http...

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • VUE的nextTick的使用及原理

    nextTick 下面了解下nextTick的主要应用的场景及原因。 在Vue生命周期的created()钩子函数...

  • 2020-07-04 nextTick

    主要应用的场景及原因 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.next...

  • Service-服务(二)onStartCommand()详解

    关于Serviced的生命周期及使用方式,可以读阅上一篇文章《Service-服务(一)生命周期及使用方式》 接下...

  • 2020-05-24

    日常知识点总结(vue篇): 1、vue的生命周期: Vue实例从开始创建,初始化数据,编译模板,挂载Dom->渲...

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • 关于vue开发中注意的点

    生命周期及回调: 不要在vue组件的固定选项(生命周期钩子、watcher等)或者回调使用箭头函数:类似creat...

  • Vue-基础概念

    vue的概念 vue的使用 生命周期 语法

网友评论

    本文标题:VUE生命周期及业务使用场景(总结篇)

    本文链接:https://www.haomeiwen.com/subject/cdocpttx.html