16生命周期

<template>
    <div>
      <h1>引出生命周期</h1>
    </div>
    <hr/>
    <div id="root">
                <!--指定css属性 指定数据名 重名就对象的简写形式{opacity} -->
      <h2 :style="{opacity: opacity}">只要你肯，一切都有可能</h2>
      <button @click="stop">点我温柔的停止变换</button>
      
    </div>
  
  生命周期<hr/>
      1. 又名:生命周期回调函数,生命周期函数,声明周期钩子<hr/>
      2. 是什么: Vue在关键时刻帮我们调用的一些特殊名称的函数<hr/>
      3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的<hr/>
      4. 生命周期函数中的this指向是vm 或 组件实例对象<hr/>
  </template>
  
  <script>
  
  export default {
  //data的第二种写法:函数式
    data() { 
      return {
     opacity:0.5,
      }
    },
    mounted () {
      this.timer = setInterval(() => {
          this.opacity -= 0.01
          if (this.opacity <=0 ) {
            this.opacity = 1
          }
        }, 16);
    },
    methods:{
      change () {
        
      },
      stop () {
        clearInterval(this.timer)
      }
    },
    computed: {
      },
    watch: {
  
    },
    directives: {
    }
    
  }
  //通过外部定时器实现(不推荐)
  // setInterval(() =>{
  //   this.opacity -= 0.01
  //   if(this.opacity <= 0)this.opacity = 1
  // },16)
  </script>
  <style scoped>
  </style>


-----------------------------------------------------------------------------------------


<template>
    <div>
      <h1>分析生命周期</h1>
    </div>
    <hr/>
    <div id="root">
    <h2>当前的n值是: {{ n }}</h2>
    <button @click="n++">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
    </div>
    <hr>
    常用的生命周期钩子:
            1.mounted: 发送ajax请求, 启动定时器,绑定自定义事件,订阅消息等[初始化操作]
            2.beforeDestroy: 清楚定时器,绑定自定义事件,取消订阅消息等[收尾工作]
    关于销毁Vue实例
            1.销毁后借助Vue开发者工具看不到任何信息
            2.销毁后自定义事件会失效,但原生DOM事件依然有效
            3.一般不会再beforeDestroy操作数据,因为即便操作数据,也不会在触发更新流程了
  </template>
  
  
  <script>
  
  export default {
  //data的第二种写法:函数式
  //template写在一个就会报错， 需要使用模板字符串的es6语法``
  // template:`
  // <div>
  //   <h2>当前的n值是: {{ n }}</h2>
  // <button @click="n++">点我n+1</button>
  // </div>
  // `,
    data() { 
      return {
        n: '1',
      }
    },
    // 挂载流程
    beforeCreate () {
      console.log('beforeCreate')
      console.log(this)
      // debugger;
    },
    created () {
      console.log('created')
      console.log(this)
    },
    beforeMount () {
      console.log('beforeMount')
    },
    mounted () {
      console.log('mounted')
    },
    // 更新流程
    beforeUpdate () {
      console.log('beforeUpdate')
      console.log(this.n)
    },
    updated () {
      console.log('updated')
      console.log(this.n)
    },
    // 销毁
    // beforeDestroy() {
    //   console.log('beforeDestroy')
    // },
    // destroyed() {
    //   console.log('destroyed')
    // },
    methods:{
      bye () {
        console.log('bye')
        this.$destroy()
      }
    },
    computed: {
      },
    watch: {
  
    },
    directives: {
    }
    
  }
  </script>
  <style scoped>
  </style>