vue避免重新渲染_小白也能懂的VUE的生命周期探寻

Vue生命周期作为vue的核心之一，生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期，生命周期的内容，如何利用生命周期出发，做一些探究生命周期的理解

官方：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期
通俗的说：当加载一个页面的时候，会创建一个vue实例来展示这个页面，第一阶段
- 最先开始的是创建，也就是 「beforeCreate」 ，这个阶段，实例初步被创建，还没有初始化，就是一个具备基本模板，没有任何数据和事件的光杆司令，
- 然后进入到「created」阶段，这时候实例创建完成，并且立刻调用这个钩子里的函数，这时候数据观测 (data observer)，watch/event 事件回调的属性和方法配置完成，页面元素还没初始化，
- 接下来准备开始挂载dom节点，以供操作，在挂载之前 「beforeMount」 阶段，这时候相关的render函数首次被调用，并且完成页面元素和数据的初始化，
- 然后「mounted」阶段，这时候属性有了，方法有了，页面元素有了，数据也有了，所以这个阶段会对DOM节点进行操作，进行挂载完毕，并且挂载完毕后调用钩子里的函数，所以大多数的函数放在这里面，因为这里了开始可以对dom进行操作

第二阶段

第一阶段数据渲染完毕，页面展现完毕，这时候想要进行数据交互，这时的第一阶段是 「beforeUpdate」 ，它发生在数据更新的调用时候，DOM还没有重新渲染之前，这时候可以进一步更改状态，而且不会触发重新渲染的过程
「updated」 阶段，这个阶段DOM以及重新渲染，可以行使操作新dom的的行为，但是应该避免出现这种行为，很可能会导致更新无线循环
「beforeDestroy」 阶段，上一阶段的行为最好放在这里使用这是实例销毁之前的最后完整保留
「destroyed this.$destroy()」 ，这个阶段实例被销毁，实例相关的一切消失，

小结：生命周期钩子的一些使用方法： 「beforecreate」 : 可以在这加个「loading」事件，在加载实例时触发 「created」 : 「初始化」完成时的事件写在这里，如在这「结束loading」事件，异步请求也适宜在这里调用 「mounted」 : 挂载元素，获取到「DOM」节点 「updated」 : 如果对「数据统一处理」，在这里写上相应函数 「beforeDestroy」 : 可以做一个「确认停止事件的确认框」

这张图有不理解的可以查上面的白话，还有不理解的可以留言，看到了会尽力回答，后期会更新源码配合理解。

vue避免重新渲染_小白也能懂的VUE的生命周期探寻相关推荐

[vue] 你有写过自定义指令吗？自定义指令的生命周期（钩子函数）有哪些？
[vue] 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些? bind inserted update componentUpdated unbind 个人简介我是歌谣,欢迎和大家一起 ...
vue 数组转集合_思想实验：如何在Vue中使localStorage具有响应式？
响应式是Vue的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个 ...
vue watch 修改滚动条_只需要这几个vue快捷开发技巧，看完技术提升30%！！！！...
前言一般在组件内使用路由参数,大多数人会这样做: 先赞再看,养成习惯~ 今天分享十个vue开发技巧给大家,中级前端工程师 1.路由参数解耦 export default {methods: {get ...
vue入门到启动_一篇超完整的Vue新手入门指导教程
前言新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发 ...
vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
小程序生命周期_来，简单说说小程序的生命周期?
简单说说小程序的生命周期? 在小程序中生命周期分为三大类应用生命周期页面生命周期组件生命周期应用生命周期 onLaunch(){ console.log('onLaunch监听小程序初始化') ...
js ios调用ios方法_通过iOS 13的模式演示调用生命周期方法
js ios调用ios方法 iOS 13 was legendary iOS 13传奇 iOS 13 brought many cool things; dark mode, sign in with ...
vue避免重新渲染_详解强制Vue组件重新渲染的方法
在某些情况下,我们必须强制Vue重新渲染组件,如果没有,那可能,你做的业务还不够负责,反正我是经常需要重新渲染组件,哈哈. 虽然Vue不会自动更新这种情况是相对比较少,但是知道如何在出现这个问题时修复 ...

vue避免重新渲染_小白也能懂的VUE的生命周期探寻

vue避免重新渲染_小白也能懂的VUE的生命周期探寻相关推荐

最新文章

热门文章