美文网首页
Vuejs的生命周期函数

Vuejs的生命周期函数

作者: rainbowboy | 来源:发表于2018-07-11 17:31 被阅读355次

vue中所有的钩子函数:

  • beforeCreate(创建前)
  • created(创建后)
  • beforeMount(载入前)
  • mounted(载入后)
  • beforeUpdate(更新前)
  • updated(更新后)
  • beforeDestroy(销毁前)
  • destroyed(销毁后)

vue官方生命周期图

vue生命周期图

生命周期代码及执行效果

<script>

    export default {
        name: 'HelloWorld',

        data() {
            return {
                msg: 'vue life circle ',
            }
        },
        created() {
        
            console.log("创建后" + this.msg)
        },

        beforeCreate() {
            console.log("创建前"+ this.msg)
        },
        beforeMount() {
            console.log("载入前"+ this.msg)
        },
        mounted() {
            console.log("载入后"+ this.msg)
            this.msg = 'check update function';
        },
        beforeUpdate() {
            
            console.log("更新前"+ this.msg)
        },
        updated() {
            console.log("更新后"+ this.msg)
        },
        beforeDestroy() {
            console.log("销毁前"+ this.msg)
        },
        destroyed() {
            console.log("销毁后"+ this.msg)
        },
        

    }
</script>
vue生命周期执行效果

更新时间: 2018-07-11

相关文章

  • Vue 2.0修仙之路 — 生命周期和钩子函数

    生命周期过程 HTML代码 JS 代码 原网址:Vue之生命周期函数:https://cn.vuejs.org/v...

  • Vuejs的生命周期函数

    vue中所有的钩子函数: beforeCreate(创建前) created(创建后) beforeMount(载...

  • Vue生命周期函数

    Vue的生命周期函数也叫做生命周期钩子生命周期示意图见官方[https://cn.vuejs.org/v2/gui...

  • Vuejs开发环境搭建

    其他文章Vuejs的生命周期函数vue-router配置vue模板语法vue计算属性和侦听器vue Class与S...

  • React生命周期函数

    生命周期函数 生命周期函数性能优化 生命周期函数发送Ajax请求

  • Vue学习笔记(12)-生命周期函数

    生命周期函数 生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以...

  • React的生命周期函数

    一、生命周期函数的定义 在某个时刻自动被调用的函数是生命周期函数 二、React中生命周期函数示意图 三、生命周期...

  • Vue的生命周期函数

    创建期间的生命周期函数: beforeCreate() 在beforeCreate() 生命周期函数执行的时候,...

  • Vue 生命周期

    生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...

  • RN-生命周期函数(新)

    旧版生命周期函数 react 16.4 以后生命周期函数 http://projects.wojtekmaj.pl...

网友评论

      本文标题:Vuejs的生命周期函数

      本文链接:https://www.haomeiwen.com/subject/ooahpftx.html