• Vue 的生命周期


    Vue 一共有8个生命阶段,分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后,每个阶段对应了一个生命周期的钩子函数。

    创建阶段
    (1)beforeCreate 初始化事件和生命周期,在实例初始化之后,在数据监听和事件配置之前触发。因此在这个事件中我们是获取不到 data 数据的。
    (2)created 钩子函数,在实例创建完成后触发,此时可以访问 data、methods 等属性。但这个时候组件还没有被挂载到页面中去,所以这个时候访问不到 e l 属性。一般我们可以在这个函数中进行一些页面初始化的工作,比如通过 a j a x 请求数据来对页面进行初始化。( 3 ) b e f o r e M o u n t 钩子函数,在组件被挂载到页面之前触发。在 b e f o r e M o u n t 之前,会找到对应的 t e m p l a t e ,并编译成 r e n d e r 函数。 r e n d e r 会生成虚拟 D O M , 挂载到真实 D O M , 挂在完成后就到了 m o u n t e d ( 4 ) m o u n t e d 钩子函数,在组件挂载到页面之后触发。此时可以通过 D O M A P I 获取到页面中的 D O M 元素。可以进行异步请求 , 操作 D O M , 定时器 . 用 t h i s . el 属性。一般我们可以在这个函数中进行一些页面初始化的工作,比如通过 ajax 请求数据来对页面进行初始化。 (3)beforeMount 钩子函数,在组件被挂载到页面之前触发。在 beforeMount 之前,会找到对应的 template,并编译成 render 函数。 render会生成虚拟 DOM, 挂载到真实 DOM, 挂在完成后就到了 mounted (4)mounted 钩子函数,在组件挂载到页面之后触发。此时可以通过 DOM API 获取到页面中的 DOM 元素。可以进行异步请求, 操作 DOM, 定时器. 用 this. el属性。一般我们可以在这个函数中进行一些页面初始化的工作,比如通过ajax请求数据来对页面进行初始化。(3beforeMount钩子函数,在组件被挂载到页面之前触发。在beforeMount之前,会找到对应的template,并编译成render函数。render会生成虚拟DOM,挂载到真实DOM,挂在完成后就到了mounted4mounted钩子函数,在组件挂载到页面之后触发。此时可以通过DOMAPI获取到页面中的DOM元素。可以进行异步请求,操作DOM,定时器.this.nexttick 把操作 DOM 放到回调中

    更新阶段, 被多次执行

    (5)beforeUpdate 钩子函数,在响应式数据更新时触发,发生在虚拟 DOM 重新渲染和打补丁之前,这个时候我们可以对可能会被移除的元素做一些操作,比如移除事件监听器。
    render,生成虚拟 DOM
    render 可以用来存储临时变量, 因为 computed 只能计算响应式数据, 而我们可能用到很多全局数据
    (6)updated 钩子函数,虚拟 DOM 重新渲染和打补丁之后调用。
    在这两个阶段不能更改依赖数据, 不然会死循环, 执行更新知道浏览器爆掉

    销毁阶段

    (7)beforeDestroy 钩子函数,在实例销毁之前调用。一般在这一步我们可以销毁定时器、解绑全局事件等。(如果用定时器不 clear, 会造成内存泄漏)
    (8)destroyed 钩子函数,在实例销毁之后调用,调用后,Vue 实例中的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
    当我们使用 keep-alive 的时候,还有两个钩子函数,分别是 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。

  • 相关阅读:
    arcgis插件 批量出图 按地块批量出图工具
    Hyperledger Fabric的test-network启动过程Bash源码详解
    处理csv、bmp等常用数据分析操作--python
    R语言使用append函数在向量数据中的指定位置插入新的元素(一个或者多个数值)
    C++程序员入门怎么学?
    如何搭建跨境独立站?
    Linux Crontab 定时任务使用示例
    Scala对象数据封装成json, 测试空数据。
    35.JavaScript对象和数组的解构赋值基础详解、let陷阱、函数参数解构
    git 常用命令
  • 原文地址:https://blog.csdn.net/weixin_46358949/article/details/126168543