精华内容
下载资源
问答
  • vue生命周期

    万次阅读 多人点赞 2020-09-28 09:18:11
    随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从...

    随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。

    一、什么是 vue 生命周期

    Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。下面是官网中的生命周期照片

    二、生命周期函数

    Vue 的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。

    1、beforeCreate(创建前)

    表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。

    2、created(创建后)

    数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。

    3、beforeMount(挂载前)

    vue 实例的 $el 和 data 都已初始化,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。

    4、mounted(挂载后)

    vue 实例挂载完成,data.message 成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,DOM 渲染在 mounted 中就已经完成了。

    5、beforeUpdate(更新前)

    当 data 变化时,会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

    6、updated(更新后)

    当 data 变化时,会触发 updated 方法。页面和 data 数据已经保持同步了。

    7、beforeDestory(销毁前)

    组件销毁之前调用 ,在这一步,实例仍然完全可用。

    8、destoryed(销毁后)

    组件销毁之后调用,对 data 的改变不会再触发周期函数,vue 实例已解除事件监听和 dom绑定,但 dom 结构依然存在。

    具体详细可以参考:https://segmentfault.com/a/1190000011381906

    展开全文
  • Vue 生命周期

    2021-01-08 13:02:43
    什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
  • Vue生命周期

    千次阅读 多人点赞 2019-06-06 15:36:07
    什么是 Vue 生命周期? Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM ->...Vue生命周期的作用是方便我们通过它的生命周期,在业务代码中更好地操...

    什么是 Vue 生命周期?

    Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    Vue 有几个生命周期,它们的作用主要是什么?

    8 个,创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue生命周期的作用是方便我们通过它的生命周期,在业务代码中更好地操作数据,实现相关功能。

    Vue生命周期详解过程

    • 创建前/后:在 beforeCreated 阶段,Vue 实例的挂载元素 e l 和 数 据 对 象 d a t a 以 及 事 件 还 未 初 始 化 。 在 c r e a t e d 阶 段 , V u e 实 例 的 数 据 对 象 d a t a 以 及 方 法 的 运 算 有 了 , el 和数据对象 data 以及事件还未初始化。在 created 阶段,Vue 实例的数据对象 data 以及方法的运算有了, eldatacreatedVuedatael 还没有。
    • 载入前/后:在 beforeMount 阶段,render 函数首次被调用,Vue 实例的 $el 和 data 都初始化了,但还是挂载在虚拟的 DOM 节点上。在 mounted 阶段,Vue 实例挂载到实际的 DOM 操作完成,一般在该过程进行 Ajax 交互。
    • 更新前/后:在数据更新之前调用,即发生在虚拟 DOM 重新渲染和打补丁之前,调用 beforeUpdate。在虚拟 DOM 重新渲染和打补丁之后,会触发 updated 方法。
    • 销毁前/后:在执行实例销毁之前调用 beforeDestory,此时实例仍然可以调用。在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定,但是 DOM 结构依然存在。beforeDestroy 钩子函数的执行时机是在 $destroy 函数执行最开始的地方,接着执行了一系列的销毁动作,包括从 parent 的 $children 中删掉自身,删除 watcher,当前渲染的 VNode 执行销毁钩子函数等,执行完毕后再调用 destroy 钩子函数。在 $destroy 的执行过程中,它又会执行 vm.patch(vm._vnode, null) 触发它子组件的销毁钩子函数,这样一层层的递归调用,所以 destroy 钩子函数执行顺序是先子后父,和 mounted 过程一样
    • activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子

    第一次页面加载会触发 Vue 哪几个钩子?

    会触发 4 个生命钩子:创建前/创建后、挂载前/挂载后

    DOM 渲染在哪个周期就已经完成?

    在 beforeMounted 时它执行了 render 函数,对 $el 和 data 进行了初始化,但此时还是挂载到虚拟的 DOM 节点,然后它在 mounted 时就完成了 DOM 渲染,这时候我们一般还进行 Ajax 交互。

    展开全文
  • VUE 生命周期

    2018-02-15 11:03:30
    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 在Vue的...

    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

    在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。

    这里写图片描述

    展开全文
  • vue生命周期钩子,vue生命周期钩子,vue生命周期钩子

    千次阅读 多人点赞 2018-07-14 14:53:35
    vue生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外) 一. 组件创建前后 1.beforeCreate 2.created 如,写一个子组件,然后挂在到父组件,在子组件中,console.log 子组件中的 data...

    说一下vue的生命周期钩子函数:

    vue 的生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外)
    一. 组件创建前后

    1.beforeCreate
    2.created

    如,写一个子组件,然后挂在到父组件,在子组件中,console.log 子组件中的

    data(){
        return {
            a:1
        },
        beforeCreate(){
            console.log(this.a)//undefined
        },
        created(){
            console.log(this.a)//1
        }
    }

    .
    .


    二. vue启动前后

    3.beforeMount
    4.mounted

    这两个的意思就是,
    vue在beforeMount时,还不管事,也就是说,还没有渲染数据到<div id="app"><div/>里面,此时的这个组件还是空的

    mounted时,才会往<div id="app"><div/> 添加东西,也就是vue正式
    接管<div id="app"><div/>

    可以获取#app的innerHTML查看差异;

    beforeMount(){
        console.log(document.getElementById('app').innerHTML)//空的
    },
    mounted(){
        console.log(document.getElementById('app').innerHTML)//#app里的内容
    }

    .
    .


    三. 组件更新前后

    5.beforeUpdate
    6.updated

    这个就不用我多说了吧?当子组件里面的 视图改变 的时候触发。
    如,做一个按钮,让data里面的a++,假如 一开始a是1
    beforeUpdate返回1
    updated返回2

    beforeUpdate(){
        console.log(document.getElementById('a').innerHTML)//1
    },
    updated(){
        console.log(document.getElementById('a').innerHTML)//2          
    }

    再点一次
    beforeUpdate返回2
    updated返回3。。。
    .
    .


    四. 组件销毁前后(一般配合v-if使用)

    7.beforeDestroy
    8.destroyed

    给这个子组件用v-if来控制它的销毁和创建,注意以下:v-show不行。
    子组件销毁前触发beforeDestroy
    子组件销毁后触发destroyed
    第一次会触发7.8.
    创建子组件后会触发以上的第1.2.3.4.钩子函数。

    有一个问题,如果我们在子组件里写一个定时器,然后,子组件被销毁了,定时器还会执行吗?
    答案是会的
    所以这时候就会用到了destroyed,在组件被销毁后,我们把定时器给清除就好了。

    所以这两个钩子函数一般用于做性能的优化。
    .
    .


    五. 组件激活时,未激活时

    9.activated
    10.deactivated

    这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。
    通过看 四。这个例子,你肯定知道了一个组件怎么被销毁和创建。
    但是我们知道通常一个组件是很大的,如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理,而且很浪费性能。。。

    这时候我们就可以用<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。

    说一下<keep-alive><keep-alive/>,它就相当于把你的组件给缓存下来了,目的呢就是不让组件重复的渲染,然后我们通过v-if触发,子组件就不会再触发7 和 8 了,而是只会频繁的触发9 和 10
    这样性能会比7 和 8 好的多。
    .
    .


    六. 当捕获一个来自子孙组件的错误时被调用

    11.errorCapture

    当子孙组件报错的时候,父组件会触发这个钩子函数,并且会返回三个参数,
    第一个参数是 错误对象
    第二个参数是 报错的子孙组件
    第三个参数是 报错的子孙组件的具体哪个地方报错。(如,假如我没有定义b这个变量,但是我去console.log(b) 这一句肯定会报错,假如我把这句错误代码写在了created这个钩子函数里,那第三个参数会返回就是:created hook

    具体第11个没深入研究,喜欢的可以去看下官网的 errorCapture

    好啦,手打不易,给个赞吧。
    还是那句话,如果有说的不对的地方,请指教。

    展开全文
  • vue 生命周期

    2019-05-09 14:59:50
    数据和事件配置之前,不能访问methods,data,computed上的方法或数据)---created( 这是一个常用的生命周期,因为你可以调用methods中的方法、改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上、...
  • Vue生命周期.xmind

    2021-01-29 12:55:53
    Vue生命周期.xmind
  • 浅析Vue 生命周期

    2020-08-27 08:16:12
    主要介绍了Vue 生命周期的过程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue生命周期详解

    千次阅读 多人点赞 2020-06-25 11:19:34
    目录 前言: 一、生命周期流程图详解 1.beforeCreate、Created ...1、什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
  • (1条消息) vue生命周期钩子函数的正确使用方式_JaydenSun的博客-CSDN博客_vue生命周期钩子.html
  • vue生命周期图片

    2018-09-20 15:09:49
    这个图片主要介绍的是vue生命周期的整个过程,从创建到销毁的8个阶段

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,091
精华内容 22,436
关键字:

vue生命周期

vue 订阅