侧边栏壁纸
博主头像
逆流者

不登高山,不知天之高也;不临深溪,不知地之厚也。

  • 累计撰写 147 篇文章
  • 累计创建 43 个标签
  • 累计收到 4 条评论
隐藏侧边栏

Vue第11话 生命周期

逆流者
2020-01-04 / 0 评论 / 0 点赞 / 158 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2020-01-04,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1.生命周期图

image.png

2.生命周期方法

2.1 初始化显示

  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()

2.2 更新状态: this.xxx = value

  • beforeUpdate()
  • updated()

2.3 销毁 vue 实例: vm.$destory()

  • beforeDestory()
  • destoryed()

常用的生命周期方法:

  • created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
  • beforeDestory(): 做收尾工作, 如: 清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-Vue实例的生命周期</title>
</head>
<body>
<div id="app-10">
    <button @click="destroyVue">destroy vue</button>
    <p v-show="isShowing">{{msg}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vue = new Vue({
        el: '#app-10',
        data: {
            msg: 'Vue的生命周期测试',
            isShowing: true,
            persons: []
        },
        beforeCreate() {
            console.log('beforeCreate() msg=' + this.msg)
        },
        created() {
            console.log('created() msg=' + this.msg)
            this.intervalId = setInterval(() => {
                console.log('定时器,更改数据')
                this.isShowing = !this.isShowing
            }, 1000)
        },
        beforeMount() {
            console.log('beforeMount() msg=' + this.msg)
        },
        mounted() {
            console.log('mounted() msg=' + this.msg)
        },
        beforeUpdate() {
            console.log('beforeUpdate isShowing=' + this.isShowing)
        },
        updated() {
            console.log('updated isShowing=' + this.isShowing)
        },
        beforeDestroy() {
            console.log('beforeDestroy() msg=' + this.msg)
            clearInterval(this.intervalId)
        },
        destroyed() {
            console.log('destroyed() msg=' + this.msg)
        },
        methods: {
            destroyVue() {
                vue.$destroy()
            }
        }
    });
</script>
</body>
</html>
0

评论