精华内容
参与话题
问答
  • vue生命周期

    千次阅读 多人点赞 2018-04-01 09:35:35
    vue生命周期的理解 vue生命周期是指vue实例对象从创建之初到销毁的过程。 vue的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后 vue生命周期的作用:生命周期中有多个钩子,可以让我们在...

    vue生命周期的理解

    vue生命周期是指vue实例对象从创建之初到销毁的过程。

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

    vue生命周期的作用:生命周期中有多个钩子,可以让我们在控制整个vue实例时更容易形成好的逻辑

     

    ● 1、创建前/后

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

    (实例被创建之前的函数)阶段,vue实例挂载元素el和数据对象data都是undefined,还未初始化。

     

    created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见

    (当实例被创建完成之后的函数,可以对数据做一些计算,不过这里设置的数据没有setter/getter属性),vue实例的数据对象data被初始化,但是el还没有被初始化。

     

    ● 2、载入前/后

    beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用

    vue实例挂载元素el和数据对象data都初始化了,但还是挂载之前虚拟的DOM节点,data.message还未替换。

     

    mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

    注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

    (这个函数在Vue生命周期只会执行一次,页面有数据变化会通过update()更新),vue实例挂载完成,data.message成功渲染。

    vm.$mount('#id')作用------手动地挂载一个未挂载的实例

     

     

    ● 3、更新前/

    beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器

    实时监听data的变化,当data变化时,触发beforeUpdate和updated方法,会重新渲染VDom,然后在对应位置的真实的DOM打补丁

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

    当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

    注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

    updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

     

    ● 4、activatedkeep-alive 组件激活时调用

    ●  deactivatedkeep-alive 组件停用时调用

     

     5、销毁前/后

    beforeDestroy实例销毁之前调用

    destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

     

     

     

    在生命周期钩子函数中父子执行顺序:

    beforeMount--执行顺序是先父后子

    mounted--执行顺序是先子后父

     beforeDestroy--执行顺序是先父后子

    destroyed---执行顺序是先子后父

     

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

    beforeCreate created    beforeMount   mounted    

     

     

     

     

     

     

     

     

     

     

    展开全文
  • Vue生命周期

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

    什么是 Vue 生命周期?

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

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

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

    Vue生命周期详解过程

    • 创建前/后:在 beforeCreated 阶段,Vue 实例的挂载元素 eldatacreatedVuedatael 和数据对象 data 以及事件还未初始化。在 created 阶段,Vue 实例的数据对象 data 以及方法的运算有了,el 还没有。
    • 载入前/后:在 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 生命周期

    2020-01-08 09:33:30
    3.vue中内置的方法 属性和vue生命周期的运行顺序(data、methods、computed、watch) 4.自己构造的方法与vue生命周期的运行顺序 5.总结 一、vue的生命周期是什么 ​ vue每个组件都是独立的,每个组件都有一个...

    生命周期

    1.vue的生命周期是什么 ?

    2.vue生命周期的在项目中的执行顺序

    3.vue中内置的方法 属性和vue生命周期的运行顺序(data、methods、computed、watch)

    4.自己构造的方法与vue生命周期的运行顺序

    5.总结

    一、vue的生命周期是什么

    生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。组件创建、挂载、更新、销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数。

    ​ vue每个组件都是独立的,每个组件都有一个属于它的生命周期。

    注意: 生命周期钩子函数不允许写成箭头函数

    在组件中具体的方法有:

    new Vue()

    构造函数生成vue 实例

    beforeCreate

    1. 组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
    2. 数据没有获得,真实dom也没有渲染出来
    3. 可以进行数据请求,提供了一次数据修改的机会
    4. 执行一次

    created

    在这个生命阶段,对象及其事件完全初始化,计算属性,事件回调,但dom树并未挂载。

    1. 组件创建结束
    2. 数据得到了,真实dom没有渲染出来
    3. 可以进行数据请求,提供了一次数据修改的机会
    4. 执行了一次

    beforeMount

    在这个阶段,它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板,那么它将所定义元素的外部HTML视为模板。

    1. 组件挂载前
    2. 任务: 判断el 判断 template
      如果el没有,那么我们需要手动挂载,如果有,那么判断template
      如果template有,那么进行render函数
      如果template没有,那么通过 outerHTML 手动书写模板
    3. 数据可以获得,但是真实dom还没有渲染
    4. 可以进行数据请求,也提供了一次数据修改的机会
    5. 执行一次

    mounted

    DOM已准备就绪并放置在页面内,一旦模板准备就绪。它将数据放入模板并创建可呈现元素,用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

    1. 组件挂载结束
    2. 数据获得了,真实dom也获得了
    3. 可以进行数据请求,也就可以修改数据
    4. 执行了一次
    5. 可以进行真实dom的操作了( 可以进行第三方库的实例化了 )

    数据更新

    beforeUpdate

    在外部事件/用户输入使数据发生更改时,此钩子在DOM元素的更改之前被触发。

    1. 更新前
    2. 重新渲染 DOM , 然后通过算法比较两次vdom,生成patch 补丁对象
    3. 这个钩子函数更多的是内部进行一些操作,我们就不在多干预了
    4. 可以触发多次

    updated

    1. 更新结束
    2. 真实dom得到了,数据也得到了( 更新后的 )
    3. 动态数据获取( 第三方库实例化 )
    4. 可以触发多次

    beforeDestroy

    实例销毁之前调用,在这里还可以访问实例的数据。

    //这里可以调用 vm.$destroy();来销毁该对象。

    destroyed

    组件已销毁 后调用

    综上总结:

    1. 数据请求一般写在created里面
    2. 第三方库实例化我们一般会往mounted中写

    Vue的销毁有两种形式

    1. 通过开关的形式
    2. 通过调用 $destroy 方法

    对比: 内部销毁 vs 外部销毁

      外部销毁不仅能销毁组件,也能销毁该组件的dom结构
      内部销毁只能销毁组件,不能销毁组件的dom结构  
    

    生命周期销毁代码

    外部销毁

      <div id="app">
        <button @click = "flag = !flag"> 切换 </button>
        <Hello v-if = "flag"></Hello>
      </div>
      <template id="hello">
        <div>
          hello
        </div>
      </template>
    
    内部销毁
      <div id="app">
        <Hello></Hello>
      </div>
      <template id="hello">
        <div class="hello-box">
          <button @click = "clear"> 销毁 </button>
          hello
        </div>
      </template>
    

    公共js代码

      Vue.component('Hello',{
        template: '#hello',
        methods: {
          clear () {
            this.$destroy()
          }
        },
        mounted () {
          this.time = setInterval ( () => {
            console.log( '1903' )
          },1000)
        },
        beforeDestroy () {
          console.log('beforeDestroy')
          clearInterval( this.time )
          document.querySelector('.hello-box').remove()
        },
        destroyed () {
          console.log('destroyed')
        }
      })
      new Vue({
        el: '#app',
        data: {
          flag: true
        }
      })
    

    概要

    我们可以使用生命周期钩子在Vue对象的不同阶段添加自定义代码。它将帮助我们控制在DOM中创建对象的流程,以及更新和删除对象。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <button @click="fn">按钮</button>
            <p ref="pp">
                {{title}}
            </p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            let vm = new Vue({
                el:"#app",
                data:{
                    title:"123"
                },
                methods:{
                    fn(){
                        this.title = "456"
                    }
                },
                //在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
                beforeCreate(){
                    //拿不到数据
                    console.log(this)
                },
                created(){
                    //可以拿到数据,拿不到dom节点
                    console.log(this.title)
                    console.log(this.$el)//
                },
                beforeMount(){
                    console.log(this.title)
                },
                mounted(){
                    //拿到dom节点
                    console.log(this.$refs.pp)
                },
                //当你数据修改的时候会被执行,不会在这两个钩子函数里面修改数据
                beforeUpdate(){
                    console.log(this.$refs.pp.innerHTML)
                },
                updated(){
                    //如果你去修改数据了,想要完全检测的话只能在updated
                    // console.log(2)
                    console.log(this.$refs.pp.innerHTML)
                },
                beforeDestroy(){
                    console.log("销毁前")
                },
                destroyed(){
                    console.log("已销毁,结束!")
                }
            })
            // 销毁
            vm.$destroy();
        </script>
    </body>
    </html>
    

    vue中内置的方法属性和vue生命周期的运行顺序

    data props computed watch methods他们之间的生成顺序是什么呢?

    根据翻看vue源码可知:

    在这里插入图片描述
    props => methods =>data => computed => watch

    自己构造的方法与vue生命周期的运行顺序 如show这些

    往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法,但是这样调用的时候可能会导致数据的延迟滞后的问题,则会出现bug。

    解决方法则是推荐采取异步回调的方法,然后传参进去,严格遵守vue的生命周期就可以解决 推荐 es6 的promise。

    示例代码:

    handleAsync () {
        return new Promise(resolve=>{
           const res="";
            resolve(res)
    	})
    }
    
    async handleShow() {
        await this.handleAsync().then(res=>{
        	this.$refs.child.show(res);
    	})
    }
    

    vm.$destroy();

    vm.$destroy();

    完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
    触发 beforeDestroy 和 destroyed 的钩子。

    展开全文
  • Vue 生命周期

    2019-06-18 20:30:00
    /* * @version: V.1.0.0.1 * @Author: fenggang * @Date: 2019-06-18 19:38:19 * @LastEditors: fenggang * @LastEditTime: 2019-06-18 20:22:14 * @Descripttion: Vue ...*/Vue 生命周期: new Vue() 实例 Vue 对象...
    /*
    * @version: V.1.0.0.1
    * @Author: fenggang
    * @Date: 2019-06-18 19:38:19
    * @LastEditors: fenggang
    * @LastEditTime: 2019-06-18 20:22:14
    * @Descripttion: Vue Life Cycle
    */
    Vue 生命周期:
    1. new Vue() 实例 Vue 对象
    2. beforeCreate 在 Vue 对象实力之前(最先加载),可以先做一个加载动画效果
    3. created 已经实例完 Vue 对象,Dom 对象还未生成(结束动画加载,可以渲染 Dom),可以做的事情给属性赋值以及请求的网络接口加载
    4. 开始检测 el [el 为 element ]是否存在,如果不存在则检查最后 Vue 对象之后 .$mount() 是否存在里面参数为 '#app', 如果两者都不存在生命周期在此结束
    5. 检测 template 检查组件,组件当中的内容为 html 标签(可以自定义组件内容),也可以自己定义的标签,如果 第4条内容不存在 template 要是也不存在,没有可渲染的内容则生命周期结束
    6. beforeMount 挂载,开始编译 template 模板里内容,只是在虚拟 Dom 中执行
    7. mounted 完成编译,开始挂在钩子函数,当前页面显示完成执行函数
    8. beforeUpdate 组件发生更新之前
    9. updated 组件更新之后
    10. beforeDestroy 销毁之前,代码执行已基本到结束
    11. destroyed 方法执行完成销毁,代码执行结束

    生命周期执行顺序总结:

    1. beforeCreate 组件实例化之前之执行的函数
    2. created 组件实例化完成,但页面还未显示
    3. beforeMount 组件挂载前,页面仍未显示,但虚拟 Dom 已经配置
    4. mounted 组件挂载之后,此方法执行后,页面显示
    5. beforeUpdate 组件更新前,页面仍未更新,但虚拟 Dom 已经配置
    6. updated 组件更新,此方法执行后,页面显示
    7. beforeDestory 组件销毁前
    8. destoryed 组件销毁

     

    转载于:https://www.cnblogs.com/FGang/p/11047457.html

    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 10,625
精华内容 4,250
关键字:

vue生命周期

vue 订阅