Vue生命周期

Vue生命周期

Vue的四个过程

1.实例创建，数据放在实例中

2.挂载模板：el---->div

3.改页面，改变量，都会互相影响

4.销毁实例

四个过程对应的八个函数

钩子函数 作用
beforeCreate 创建Vue实例之前调用，data，el都没有
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount 渲染DOM之前调用 ，data有了，el没有
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

AOP的体现：面向切面编程--》装饰器实现aop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue声明周期</h1>
    <button @click="handleShow">点我组件显示和消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>

</div>


</body>

<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '好看的首页',
                t:''
            }
        },
        methods: {
            handleClick() {
                // alert('前进')
                this.title = 'lqz'

            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            // 开启定时器，每隔3s，打印hello
            this.t=setInterval(()=>{
                console.log('hello')
            },3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('当前状态：beforeDestroy')
        },
        destroyed() {
            console.log('当前状态：destroyed')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null

        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }

    })
</script>
</html>

学习生命周期重点掌握的

  • 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
  • destroyed做一些资源清理性的工作

小案例：

组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁

js 定时任务

 setTimeout(()=>{
       console.log('3s后执行我')
    },3000)

js 延时任务

setInterval(()=>{
     console.log('hello')
   },3000)

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue声明周期</h1>
    <button @click="handleShow">点我组件显示和消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>

</div>


</body>

<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '好看的首页',
                t:''
            }
        },
        methods: {
            handleClick() {
                // alert('前进')
                this.title = 'lqz'

            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            // 开启定时器，每隔3s，打印hello
            this.t=setInterval(()=>{
                console.log('hello')
            },3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('当前状态：beforeDestroy')
        },
        destroyed() {
            console.log('当前状态：destroyed')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null

        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }

    })
</script>
</html>

什么场景下用定时任务

  • 实时跟后端交互

    ​ 基于http+定时任务 （websocket协议：服务端主动推送消息，手机app的消息推送）

  • 秒杀场景：

    ​ 先提交秒杀请求，每隔3s，查询是否秒到

posted @ 2022-10-26 19:18  Nirvana*  阅读(18)  评论(0)    收藏  举报