vue-生命周期

栏目: 编程语言 · 发布时间: 7年前

内容简介：图中红色标红的函数生命周期函数中的this默认绑定到该vue实例，所以不要使用箭头函数，会出现this绑定错误。: 可获取vue实例，data数据未绑定，el未挂载。所以不要在此函数内对数据做任何修改，因为数据undefined。

生命钩子函数/周期函数

图中红色标红的函数

created() {
    
}
mounted() {
    
}
复制代码

生命周期函数中的this默认绑定到该vue实例，所以不要使用箭头函数，会出现this绑定错误。

生命周期各个阶段

beforeCreate

<div id="app">hello world</div>

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    beforeCreate() {
        console.log('beforeCreate') // beforeCreate
        console.log(this) // Vue$3
        console.log(this.$el) // undefined
        console.log(this.a) // undefined
    }
})
复制代码

beforeCreate()

: 可获取vue实例，data数据未绑定，el未挂载。所以不要在此函数内对数据做任何修改，因为数据undefined。

created

<div id="app">hello world</div>

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    created() {
      console.log('created') // created
      console.log(this) //Vue$3
      console.log(this.$el) // undefined
      console.log(this.a) // 1
    }
})
复制代码

created()

: 数据已挂载，el未挂载，适合初始化数据。

beforeMount

没有 el 属性

当没有el属性时，该函数不会被调用，只有当调用$mount函数时才会被调用。

var vm=new Vue({
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // 没有任何输出
    }
})

vm.$mount('#app')
// beforeMount 
复制代码

没有 template 属性

没有template属性时，el外部的html被当成template进行渲染

var vm=new Vue({
    el:'#app',
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // beforeMount
      console.log(this) // Vue$3
      console.log(this.$el) // <div id="app">hello world</div>
      console.log(this.a) // 1
    }
})
复制代码

3. 有 template

属性

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // beforeMount
      console.log(this.$el) // 注意！！ <div id="app">hello world</div>
    }
})
复制代码

beforeMount

: 渲染template，但el仍未挂载

mounted

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    mounted() {
      console.log('mounted') // mounted
      console.log(this.$el) // 注意！！ <div>hello vue</div>
    }
})
复制代码

mounted()

: 挂载el，将el标识的dom元素整个替换成template渲染成的dom元素。

beforeUpdate/updated

当绑定的数据变化时，先调用beforeUpdate函数，任何更新虚拟dom，重新渲染，然后调用updated。

注意

：只有绑定在模板里渲染的数据变动才会调用这两个函数。

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>',
    data:{
        a:1
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    }
})
vm.a=2 // 没有任何输出

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue！！！{{a}}</div>',
    data:{
        a:1
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    }
})
vm.a=2 // beforeUpdate updated
复制代码

调用vm.$destory()后调用beforeDestroy(),移除监听器、数据解绑、销毁子实例后调用destroyed()

以上所述就是小编给大家介绍的《vue-生命周期》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

白话大数据与机器学习

高扬、卫峥、尹会生 / 机械工业出版社 / 2016-6 / 69

本书通俗易懂，有高中数学基础即可看懂，同时结合大量案例与漫画，将高度抽象的数学、算法与应用，与现实生活中的案例和事件一一做了关联，将源自生活的抽象还原出来，帮助读者理解后，又带领大家将这些抽象的规律与算法应用于实践，贴合读者需求。同时，本书不是割裂讲解大数据与机器学习的算法和应用，还讲解了其生态环境与关联内容，让读者更全面地知晓渊源与未来，是系统学习大数据与机器学习的不二之选： ·大数据产业......一起来看看《白话大数据与机器学习》这本书的介绍吧!

码农工具