35 组件生命周期的应用-526互联

banner：横幅，旗帜

这节课没啥的
重要的是，哪个时间节点应该做什么事，可以做什么事，这一点要理解。（或者说，不同的事情放在不同的时间节点完成）

<template>
  <div>
    <h3>组件的生命周期</h3>
    <p ref="zhan">{{ msg }}</p>
    <button @click="clickHandle">修改数据，触发更新相关的两个函数</button>
  </div>
</template>

<script>
// 钩子函数的应用
      // 1. 获取节点，配合 ref 使用
      // 2. 模拟网络请求
  export default {
    data() {
      return {
        msg: "数据更新之前"
      }
    },
    methods: {
      clickHandle() {
        this.msg="数据更新之后"
      }
    },
    beforeCreate(){
      console.log("组件创建之前")
    },
    created(){
      console.log("组件创建之后")
    },
    beforeMount(){
      console.log("组件渲染之前")
    },
    mounted () {
      console.log("组件渲染之后");
      // 1. 获取节点，配合 ref 使用
      console.log(this.$refs.zhan)
    },
    beforeUpdate () {
      console.log("组件更新之前");
    },
    updated () {
      console.log("组件更新之后");
    },
    beforeUnmount () {
      console.log("组件卸载之前");
    },
    unmounted(){
      console.log("组件卸载之后")
    }
  }
</script>

<style lang="scss" scoped>

</style>

组件