精华内容
下载资源
问答
  • Vue生命周期钩子函数

    2020-03-11 23:39:58
    Vue生命周期钩子函数 Vue实例的生命周期 从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期 别称:生命周期钩子=生命周期函数=生命周期事件 主要的生命周期函数: 创建期间的...

    Vue生命周期钩子函数

    Vue实例的生命周期

    从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期
    别称:生命周期钩子=生命周期函数=生命周期事件

    主要的生命周期函数:

    创建期间的生命周期函数

    beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性
    created:实例已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模块,此时加载数据,能快速把数据加载到指定实例。
    beforeMount:此时,已经将编译好的模板,但是没有挂载到了页面指定的容器中
    mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示,如果要操作元素,最好在这时,因为这里的DOM元素是最新的。

    运行期间的生命周期函数

    beforeUpdate:状态更新之前执行此函数,此时data中的状态是最新的,但是界面上显示的数据是旧的,因为此时还没有开始重新渲染DOM节点
    updated:实例更新完毕之后调用该函数,此时data中的状态值和界面上显示的数据都已经完成了更新,界面已经被重新渲染好了

    销毁期间的生命周期函数

    beforeDestroy:实例销毁之前调用,在这一步,实力仍然完全可用。
    destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑,所有的事件监听器都会被移除,所有的子实例也会被销毁。

    在这里插入图片描述
    在这里插入图片描述

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

    2020-03-25 00:08:35
    vue生命周期钩子函数 组件或者实例从创建到销毁的一系列过程叫做组件的生命周期。vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行。(在生命周期的某...

    vue生命周期钩子函数


           组件或者实例从创建到销毁的一系列过程叫做组件的生命周期。vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑, 并且这些函数会在一些特定的场合下去执行。(在生命周期的某一个时刻进行触发)

    组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁

    也可以理解为创建、渲染、更新、销毁

                初始化阶段: beforeCreate  created    beforeMount mounted

                运行中阶段: beforeUpdate  updated

                销毁阶段:   beforeDestroy destroyed

    钩子函数

    beforeCreate --创建前,

           数据拿不到(undefined)、dom节点没有渲染(null),

           在此阶段可以做的事情:lodding效果效果

    created --创建后,(常用)

           拿到数据(data methods等),dom节点没有被渲染,

           在此阶段可以做的事情:解决loading,请求ajax数据为mounted渲染做准备

    beforeMount --渲染前

          拿到数据(data methods等),dom节点还是虚拟的dom节点,

          在此阶段可以做的事情:。。。

    mounted --渲染后 (常用)

          数据和dom都已经渲染完成

          在此阶段可以做的事情:操作dom的工作基本都在这里。这里也可以发起ajax请求

    beforeUpdate --更新前

         不会主动触发,只会在data变化时触发,这里的dom元素的数据也是更新前的数据,但是实际内存中的数据已近改变了

         在此阶段可以做的事情:。。。

    updated —更新后

    (由于数据一更新就会触发,触发频率高又要操作dom进行渲染,所以很少操作,即使操作也要保证方法的轻量级,有别的处理办法尽量不要使用updated)

          不会主动触发,只会在data变化时触发,这里的dom元素里的数据,就是更新后的数据,和实际内存里的数据一致

          在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)

    beforeDestroy —销毁前

          组件销毁时触发,

          在此阶段可以做的事情:清除一些事件绑定例如定时器

    destroyed —销毁后

         组件销毁时触发,vue实例解除了事件监听、双向绑定 watch等操作,但DOM节点依旧存在

        在此阶段可以做的事情:组件销毁时进行提示

    展开全文
  • VUE生命周期钩子函数

    2020-03-29 13:18:26
    生命周期钩子函数的理解 组件从创建到销毁的一系列过程叫做组件的声明周期。 vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑, 并且这些函数会在一些特定的场合下去执行。(在生命周期的某一...

    生命周期钩子函数的理解

           组件从创建到销毁的一系列过程叫做组件的声明周期。
          vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,
        并且这些函数会在一些特定的场合下去执行。(在生命周期的某一个时刻进行触发)
    

    组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁
    初始化阶段: beforeCreate created beforeMount mounted
    运行中阶段: beforeUpdate updated
    销毁阶段: beforeDestroy destroyed

    一.初始化阶段

    1. 一个组件或者实例的生命周期都是通过new开始的,实例化之后内部会做一些初始化事件与生命周期相关的配置.
    2. beforeCreate这个钩子函数初始化的时候立马执行,此钩子函数里面获取不到数据,还有真实dom对象。
    3. created函数执行在组件创建完成,这个时候已经可以使用数据,也可以更改数据,在这里同步更改数据不会触发updata函数,一般可以在这里做初始化数据的获取。做异步ajax,绑定初始化事件。
      二.挂载阶段
      1.接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,这是在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始化数据的获取.
      2.接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情…
      三.更新阶段
      1.beforeUpdate函数在data更新前时触发,在有特殊需求的情况下,可以将更新之前的数据存起来,放到后面去使用;
      2.updated函数在data更新之后触发,在数据更新之后做一些处理;
      四.销毁阶段
      1.当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等.
      2.组件的数据绑定、监听…去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以.
      五。总结
      在这里插入图片描述
    展开全文
  • vue 生命周期钩子函数

    2019-05-25 17:27:21
    vue 有八个生命周期钩子函数,这在 vue 官方文档中也是有写到,我们可以在钩子函数中做一些我们想要的操作,但是选择哪个钩子函数确实是很头疼的事,比如:进入一个组件时,我们要做一些初始化的获取数据操作,是...

    环境:vue@2.6.10

    vue 有八个生命周期钩子函数,这在 vue 官方文档中也是有写到,我们可以在钩子函数中做一些我们想要的操作,但是选择哪个钩子函数确实是很头疼的事,比如:进入一个组件时,我们要做一些初始化的获取数据操作,是选择 created 还是 mounted 钩子呢?

    下面我们先来看代码和输出结果:

    <div id="app">
        <p>{{message}}</p>
    </div>
    var app = new Vue({
                data: {
                    message: "hy learning vue lifecycle"
                },
                beforeCreate() {
                    console.group('beforeCreate 创建前状态===============');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //undefined   $el vue 实例使用的根 DOM 元素
                    console.log("%c%s", "color:red", "$data : " + this.$data); //undefined   $data vue 实例观察的数据对象,vue 实例代理了对其 data 对象属性的访问
                    console.log("%c%s", "color:red", "message :" + this.message); //undefined
                },
                created() {
                    console.group('created 创建完毕状态===============');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //undefined  $el vue 实例使用的根 DOM 元素
                    console.log("%c%s", "color:red", "$data : " + this.$data); //已被初始化  $data vue 实例观察的数据对象,vue 实例代理了对其 data 对象属性的访问
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                beforeMount() {
                    console.group('beforeMount 挂载前状态=================');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                mounted() {
                    console.group('mounted 挂载结束状态================');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                beforeUpdate() {
                    console.group('beforeUpdate 更新前状态=================');
                    console.log("%c%s", "color:red", "$el :" + this.$el.innerHTML); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                updated() {
                    console.group('updated 更新完成状态=================');
                    console.log("%c%s", "color:red", "$el :" + this.$el.innerHTML); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                beforeDestroy() {
                    console.group('beforeDestory 销毁前状态=================');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                },
                destroyed() {
                    console.group('destoryed 销毁完成状态=================');
                    console.log("%c%s", "color:red", "$el :" + this.$el); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "$data :" + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message :" + this.message); //已被初始化
                }
            }).$mount('#app')

    输出结果为:

    我们可以看到,在 Vue 创建实例的过程中:

    beforeCreate 钩子时,Vue 实例化事件以及生命周期钩子函数,我们输出不到 $data 以及 $el,$data 是 Vue 实例观察的数据对象,$el 是 Vue 实例使用的根 DOM 元素;

    created 钩子时,获取到了 $data,以及 message 的值,说明此时实例创建完成;

    在 beforeMount 中,我们先判断 Vue 实例有没有 el 选项,没有的话要去调用 vm.$mount(el) 方法手动开始编译页面,然后再判断有无 template 模版,有的话用 render 函数编译模版,没有的话就将外界的 HTML 当作模版去编译,例如下面的 p 标签就是

    <div id="app">
        <p>外界 HTML</p>
    </div>
    
    <script>
    
        var app = new Vue({
    
            el: '#app'
        })
    </script>

    看上面的输出,此时我们能看到 $el 根元素有了,但是 p 标签中 message 还是表达式的状态,这是因为此时还是虚拟DOM。

    进入 mounted 的钩子中就会将虚拟 DOM 挂载到 el 上

    在 F12 console 中 我们输入 app.message = "change" 然后回车,我们能看到如下结果:

    先触发 beforeUpdate 钩子函数,此时 message 还是 hy learning vue lifecycle ,而到了 updated 钩子函数,message 的值已经发生了改变

    我们在 console 中 输入 app.$destroy(),能看到下面的输出

    此时,我们再输入 app.message = "change" 时,是不会触发钩子函数了,因为 destroy 钩子执行完后就销毁了所有的生命周期钩子函数、子组件、以及为所有 data 属性添加的观察对象和监听对象

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,478
精华内容 1,391
关键字:

vue生命周期钩子函数

vue 订阅