vuebeforedestroy的简单介绍

本篇文章给大家谈谈vuebeforedestroy，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue 的8个生命周期
• 2、Vue 生命周期总共分为几个阶段？
• 3、vue生命周期-mounted和created的区别
• 4、Vue生命周期函数详解解读
• 5、vue防止内存泄漏的几点写法

vue 的8个生命周期

Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期，包括初始化–挂载–更新–销毁过程，对应的钩子如启函数：

beforeCreate（初始化界面前）

created（知迟初始化界面后）

beforeMount（挂载前）

mounted（挂载后）

beforeUpdate（更新数据前）

updated（更新数据后）

beforeDestroy（卸载组件前）

destroyed（卸载组件后）

created:在模板渲染成html前调用，即通常初始化某些属性值，然后渣猛如再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

Vue 生命周期总共分为几个阶段？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模

板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程睁吵，我们称这是 Vue 的生命周期。

1、beforeCreate

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

用

2、created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data

observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目

前不可见

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

4、mounted

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

一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的

DOM，比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初

次渲染会在服务端进行

6、updated

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

7、activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

8、deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被

调用

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件

监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

11、errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子贺早胡会收到三个参数：错误对象、发生

错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继

续向上传播

vue生命周期-mounted和created的区别

总结：

beforeCreate 创建之前：已经完成了 初始化事件和生命周期

created 创建完成：已经完成了 初始化注册和没乱响应

beforeMount 挂载之前：已经完成了模板渲染

mounted :挂载之后：已完成HTML虚拟化，创建了el节点 可以操作DOM了

beforeDestroy ：摧毁之前：整个vue都处在实时监控空渲染和更新

destroyed: 已摧毁，已经摧毁了观察者，子元素和事件监听

created:在枯颤档模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节洞槐点进行一些需要的操作。

挂载到节点上的初始化方法通常用mounted去操作，主动调起的用methods里面封装方法。

数据初始化一般放到created里面，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() = { /* code */ })}里面

Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

[img]

Vue生命周期函数详解解读

// 这里是创建阶段的生命周期

beforeCreate() {

    // 第一个生命周期函数，表示实例完全被创建出来之前，会执行它

},

created() {

    // 第二个生命周期函数

},

beforeMount() {

    // 第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中

    // 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

},

mounted() {

    // 第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已桥游经可以看到渲染好的页面了

    // 实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例而已经被完全创建好了，此时，如果没有其它操作的话，这个实例就静静的躺在我们的内存中，一动不动

    // 如果要通过某些插件操作页面上的dom节点，最早要在mounted中进行

    // 只要执行完了mounted，就表示整个vue实例已经初始化完毕了，此时组件脱离了创建阶段，进入到运行阶段

},

// 这里是运行阶段的生命周期函数

// 会根据data数据的改变，有选择性的触发0次到多次

beforeUpdate() {

    // 这时候表示我们的界面还没有被更新 【数据更新了】

    // 当执行beforeUpdate的时候，页滚知面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

},

updated() {

    // updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的

},

beforeDestroy() {

    // 当执行beforeDestroy钩子函数的时候，vue实例就已经从运行阶段，进入到了销毁阶段

    // 当执行beforeDestroy的时候，实例身上所有的打他和所有的methods，以及过滤器..指令..... 都处于可用状态，此时，还没有真正执行销毁的过程

},

destroyed() {

   敏备销 // 当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器...都已经不可用了

}

vue防止内存泄漏的几点写法

beforeDestroy周期一般是在组件销毁时调用，比如使用v-if进行组件的显示隐藏，或者页面跳兄败转时就会调用到这个周期。

堆内存使用后一定要注意释放，否则gc总不回收就会导致内存泄漏。

比如对dom的引用、事件Listener、总线eventBus等，一定要在beforeDestroy里释放解绑。

当vue中有Dom引用时，派尘咐需要注意内存释尘纯放问题。weakset 和 weakmap 对值的引用都是不计入垃圾回收机制 的。也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存。

如果是对router进行了keep-alive，那进行页面跳转时就不会触发beforeDestroy，也就是对组件进行了缓存，不会销毁组件，这时我们可以用路由守卫来确保释放资源。

如果是手动调用监听watch的，也需要释放一下资源。

关于vuebeforedestroy和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。