精华内容
参与话题
问答
  • 生命周期钩子函数

    千次阅读 2018-06-25 00:15:21
    生命周期钩子函数)一、生命周期过程解释实例创建之后,初始化事件和生命周期,而后触发beforeCreate。beforeCreate,当前实例创建之前,很少操作,一般用于加载动画,比如创建一个菊花旋转。created表示当前实例...

    生命周期(钩子函数)

    一、生命周期过程解释

    实例创建之后,初始化事件和生命周期,而后触发beforeCreate。beforeCreate,当前实例创建之前,很少操作,一般用于加载动画,比如创建一个菊花旋转。created表示当前实例创建完成,组件、属性等初始化完成,一般封装一个方法,比如getDataFromNetwork,从网络请求数据。this.getDataFromNetwork()调用,触发回调,关闭beforeCreated中的菊花加载动画。当前实例创建完成,页面还未渲染未显示,拿不到DOM元素。而后,判断实例中是否有el属性(挂载点),如果有,继续往下;如果没有,然后判断是不是有vm.$mount,两者二选其一,接着判断有没有template,如果有,触发渲染函数,进入beforeMount,表示将要挂载,页面仍未显示,接着创建vm.$el,接着触发mounted,此时可以操作dom,beforeUpdate与update保持数据与页面的同步,会频繁触发,一般不要进行操作。接下来,destroyed表示组件销毁,destroy的中一般用于取消计时器,取消观察者等等。

    二、流程图说明

    三、具体钩子介绍

     

    ①beforeCreate
    组件实例将要创建,一般在该时机,开启加载一个动画。
    ②created
    组件实例创建完成,在该时机可以访问实例中的data的属性和methods中的方法,但不能操作dom。因为页面还未加载成功,页面未显示。
    注意:调用methods中的方法,完成网络请求,vue推荐的两种数据获取方式
    1、beforeRouteEnter 该路由加载之前请求数据,数据请求完成执行next(),显示目标路由(优点:保证页面显示时,一定可以拿到数据)
    2、created,在该时机发起请求,获取数据

    ③beforeMount
    组件实例将要挂载到挂载点,页面未显示,开发中很少使用
    ④mounted
    组件模板已经渲染到指定的el,页面显示,可以操作dom。
    ⑤beforeUpdate
    组件将要更新
    ⑥updated
    组件更新完成
    注意:关于update的钩子函数,都是页面动态渲染有关,每当数据变化是,变会页面更新,都会触发这些钩子,这些钩子的触发频率很高,我们极少操作,即便操作,也要保证内部方法轻量级。
    ⑦beforeDestroy
    组件将要销毁
    ⑧destroyed
    组件销毁完成。常在该时机移除耗时操作,比如计时器等

    四、温馨提示

    更多博文,请关注公众号:xssy5431 【小拾岁月】

    扫码:

     

    展开全文
  • 生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子函数,这...

    一.生命周期钩子

        每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

    1.钩子函数 

    钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。

    2.相对于前端来讲 

    对于前端来说,钩子函数就是指在所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行。

    3.vue中的mounted 

    在这发起后端请求,拿回数据,配合路由钩子做一些事情 

        Vue.js官方的生命周期图

    例:created钩子可以用来在一个实例被创建之后执行代码:

    new Vue({
      data: {
        a: 1
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })
    // => "a is: 1"

    也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mountedupdated和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

    不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

    二.钩子函数

    一个指令定义对象可以提供如下几个钩子函数 (均为可选):

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。

    接下来我们来看一下钩子函数的参数 (即 elbindingvnode 和 oldVnode)。

    钩子函数的参数

    指令钩子函数会被传入以下参数:

    • el:指令所绑定的元素,可以用来直接操作 DOM 。
    • binding:一个对象,包含以下属性:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1"中,表达式为 "1 + 1"
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
    • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    这是一个使用了这些属性的自定义钩子样例:

    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    
    Vue.directive('demo', {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: '       + s(binding.name) + '<br>' +
          'value: '      + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: '   + s(binding.arg) + '<br>' +
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    
    new Vue({
      el: '#hook-arguments-example',
      data: {
        message: 'hello!'
      }
    })

     

    展开全文
  • Vue之生命周期的8个钩子函数

    千次阅读 2019-05-28 21:48:23
    Vue-生命周期总结: 生命是生命周期呢? 当前组件在创建到销毁经历的一系列过程,称之为生命周期 生命周期的分为几个阶段?每个阶段有哪些钩子函数 生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 ...

    Vue-生命周期

    1. 生命是生命周期呢?
      当前组件在创建到销毁经历的一系列过程,称之为生命周期
    2. 生命周期的分为几个阶段?每个阶段有哪些钩子函数
      生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
      初始化阶段:有4个钩子函数 , 触发条件是自动的
      beforeCreate
    3. 组件即将创建,进行组件事件和生命周期的初始化
    4. 项目中一般不使用,至少对于我来说是的哈
    5. 有的开发者也会在这里进行数据请求
      created
    6. 组件创建完成
    7. 项目中:
      1) 异步请求接口数据
      2) 数据修改
      beforeMount
    8. 组件即将挂载
    9. 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
    10. 项目中:
      1) 异步请求接口数据
      2) 数据修改
      mounted
    11. 组件挂载结束
    12. 使用真实DOM替换VDOM
    13. 项目中
      1) 异步请求接口数据
      2) 数据修改
      3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )
    
    <body>
        <div id="app">
            <button @click="flag = false">我要销毁啦</button>
            <Hello v-if="flag"></Hello>
        </div>
        <template id="hello">
          <div>
            <input type="text" v-model="money" />
            <h3>{{ money }}</h3>
          </div>
        </template>
    
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <script>
            Vue.component("Hello", {
                template: "#hello",
                // template:"<h3> are u ready for ur future</h3>"
                data() {
                    return {
                        money: 2000
                    };
                },
                //init
                /* 这个阶段是组件被创建
                                data:选项中的数据获取不到
                                真实的DOM耶获取不到
                                再项目中基本上没什么用
                                但是这个阶段是一个对事件和生命周期的准备阶段
                                必不可少
                                1 组件初始化beforeCreate
                                data undefined
                                真实DOM null */
    
                beforeCreate() {
                    console.log("1 组件初始化beforeCreate");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
    
                /*
                            组件创建结束
                             data选项中的数据能获取到
                            但是取不到真实的DOM
                            在项目中可以修改数据和发出异步数据请求
                                 */
    
                created() {
                    this.money = 200000; //会修改之前定义的money的值
                    console.log("2 created");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
    
                /*
                            组件即将挂载
                             data选项中的数据能获取到
                            但是取不到真实的DOM
                            在项目中可以修改数据和发出异步数据请求
                                 */
    
                beforeMount() {
                    //组件即将挂载
                    console.log("3 beforeMount");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
    
                /* 可以获得data数据
                        也可以取到真实DOM
                        一般在项目中进行:
                                数据修改
                                异步数据请求
                                真实DOM操作
                        但是我们一般不推荐操作真实DOM,
                        推荐进行第三方库的实例化(比如静态数据渲染)*/
                mounted() {
                    //组件挂载结束了,
                    this.time = setInterval(() => {
                        console.log(11111)
                    }, 1000)
                    document.querySelector("h3").style.background = "salmon";
                    console.log("4 mounted");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
    
                //运行中要有触发条件才会改变  不触发是没有结果的
                /*  这个阶段里
                     可以拿到data的数据
                     也可以取到真实的DOM
                     这个阶段进行的是VDOM和DIFF算法的对比
                     都是在组件内部进行的 
                     一般我们项目中不使用 */
                beforeUpdate() {
                    console.log("5 beforeUpdate");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
    
                /*  
                     此时 组件更新结束
                     通过render函数将VDOM渲染成真实DOM
                     然后驱动vue进行视图更新 
                     在这个阶段里*/
                updated() {
                    //组件更新结束
                    document.querySelector("h3").style.background = "blue";
                    console.log("6 updated");
                    console.log("data", this.money);
                    console.log("真实DOM", document.querySelector("h3"));
                },
                beforeDestroy() {
                    console.log(' beforeDestroy ')
                },
                destroyed() {
                    clearInterval(this.time)
                    console.log(' destroy ')
    
                },
            });
    
            new Vue({
                // el: "#app",
                data: {
                    msg: "hello Melinda!",
                    flag: true,
                }
    
            }).$mount("#app");
        </script>
    </body>
    

    总结:

    初始化过程中在项目中使用
    数据请求:created
    DOM操作: mounted
    数据修改: beforeMount created mounted
    运行中阶段:有2个钩子函数 : 触发条件是: 当data选项中的数据发生改变时
    beforeUpdate:
    内部操作 : vdom生成和diff的对比
    updated
    Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化
    销毁阶段: 有2个钩子函数
    beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
    destoryed: 组件销毁结束

    这两个钩子函数没有什么去别,功能很相似

    项目中:
    这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例

    组件销毁的两种方式:

    1. 使用$destroy()方法(内部销毁)
      缺点: 会将组件的模板也保留下来
    2. 使用开关销毁(外部销毁)
      v-if
      这种类型的销毁不会留有模板

    有一个钩子函数可以不写,这个钩子函数就是render 函数

    1. 生命周期中钩子函数的触发条件是什么?
    2. 项目中如何使用?
    3. 名词解释:
      钩子函数: 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发
    4. 除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象
      为什么是函数呢?
      原因:我们希望组件的数据是独立的,有一定作用域的
      为什么返回值是对象?
      原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter
    5. 其他选项写在生命周期的上
    展开全文
  • 生命周期钩子函数

    2018-09-20 21:54:07
    生命周期钩子函数一共经历四个过程: 1. 创建时期 beforeCreated()这个阶段表示实例完全被创建出来之前,会执行它,注意:在beforeCreated生命周期函数执行的时候,data和methods中的数据都还没有初始化,现在输...

    生命周期钩子函数一共经历四个过程:

    1. 创建时期

    beforeCreated()这个阶段表示实例完全被创建出来之前,会执行它,注意:在beforeCreated生命周期函数执行的时候,data和methods中的数据都还没有初始化,现在输不出data和methods中的数据。

    created钩子函数:在created中,data和methods都已经初始化好了,如果要调用methods中的方法,或者操作data中的数据,最早在created中操作。当vue实例被创建的时候,会触发该方法,在此函数中无法调用$el,即无法获取被绑定的根元素。

    2. 挂载时期

    beforeMounted:表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中去,这里表示vue开始表一模板,把vue代码中的那些指令进行执行,最终在内存中生成一个编译好的最终的模板字符串,然后,把这个模板字符串,渲染为内存中的dom,此时,只是在内存中渲染好了模板,并没有把模板挂载到页面中去。

    mounted钩子函数: 表示内存中的模板真实的挂载到了页面中,用户已经可以看到渲染好的页面了,注意:mounteed是实例创建期间最后一个生命周期函数,当执行完mounted就表示实例已经被完全创建好了,此时,如果没有其他的操作的话,这个实例,就静静的躺在内存中了,此时组将已经脱离了创建阶段,进入到了运行阶段。当实例被挂载到dom树上时会触发mounted方法,即数据已经渲染完毕,已经在页面上显示出来了,此函数之后都可以获取到$el。如果要通过某些插件操作页面中的dom节点,最早要在mounted中进行。

     

    下面是组件运行阶段的生命周期函数只有两个,beforeUpdate和updated,这两个事件,会根据data中数据的改变,有选择性的触发0次或者多次。

    3. 修改时期

    beforeUpdate:表示页面还没有被更新,数据已经被更改了,页面显示的数据还是旧的,没有被改变,而data中的数据是更改后的数据,所以数据不一致。

    updated:事件执行的时候,页面和data数据已经保持一致了,都是最新的。

    4. 销毁时期

    当执行beforeDestroyed钩子函数的时候,就已经从运行阶段,vue实例进入到销毁阶段,当执行beforeDestroy的时候,实例身上所有的data和所有的methods,以及过滤器、指令都处于可用的状态,此时,还没有真正执行销毁的过程。

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

    组件其实是个迷你版的vue实例,组件与vue实例一样,在生成的过程中,会自动调用生命周期钩子函数,常用的生命周期钩子函数也就是created和mounted这两个。

    展开全文
  • 每个Vue应用都是通过一个Vue函数创建一个新的Vue实例开始的,一个Vue应用通过new vue创建的根Vue实例。 var vm = new Vue({ // 选项 }) 数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的数据...
  • ![1、beforeCreate (使用频率低) ...* 且修改数据不会触发updated beforeUpdate钩子函数 * 可以在这个钩子函数里发请求,访问后端接口拿数据 * 判断是否存在el,是否存在template,如果二者都有,以t...
  • 生命周期钩子函数

    2020-11-09 17:11:50
    生命周期钩子函数图示详解实例 图示 详解 每个Vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板,渲染模板等等。 Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的...
  • 在了解vue生命周期函数之前,我们先看看啥叫"钩子函数"?百度一下是这样一段官方解释:“钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况...
  • react的生命周期钩子函数

    万次阅读 2019-04-22 08:23:35
    掌握单词后会更好理解生命周期: constructor ------构造函数 component ------组件 will ------将要 get ------得到 default ------默认值 initial ------最初的 unsafe ...
  • vue生命周期钩子函数详解

    万次阅读 多人点赞 2018-07-26 11:12:03
    先放一张官网生命周期图: vue有8种生命周期函数: 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件 ...
  • 教女朋友学习 vue的生命周期钩子函数

    万次阅读 多人点赞 2020-04-16 22:08:35
    这篇博客详细的介绍了Vue 的生命周期,并有示例代码。
  • 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽、捷报频传~ 但是在前几天却遭遇了一个意外,我在mounted中获取后台数据并更新data,在template中把data.fullname与一个p元素的...
  • react生命周期钩子函数

    千次阅读 2018-11-19 20:47:31
    下面我从constructor构造函数开始,从参数、作用、用法各方面总结 1、constructor constructor参数接受两个参数props,context 可以获取到父组件传下来的props,context,如果你想在constructor构造函数内部使用...
  • Vue 生命周期钩子函数实例详解

    千次阅读 2018-06-15 14:54:07
    vue生命周期简介Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命...
  • vue的生命周期钩子函数与自定义指令钩子函数&lt;title&gt;Document&lt;/title&gt; &lt;script src="Js/vue.js"&gt;&lt;/script&gt; &lt;div id="app"&...
  • REACT
  • 生命周期钩子函数

    2019-03-23 15:42:37
    生命周期钩子函数 指的是 Vue 在被使用的时候,或者说在被创建开始到被销毁的整个过程,程序提前预设在 Vue 当中的一些函数会在什么时候做的自动触发。 生命周期:指的是 Vue 从创建、到使用、到结束。 钩子函数: ...
  • Vue的生命周期钩子函数之activated

    万次阅读 2018-09-08 21:10:39
    Vue的生命周期钩子函数之activated activated 生命周期在keep-alive 组件激活时调用 服务器端渲染期间不调用该生命周期 通常和deactivated周期一起使用 以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏...
  • 把以下代码进行运行,看过程,应该能够明白意思:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &...div id
  • 生命周期 钩子函数

    2018-07-02 14:58:41
    生命周期小结生命周期钩子的一些使用方法:beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用mounted : 挂载...

空空如也

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

生命周期钩子函数