引出生命周期

实现一个透明度来回变化的效果。

实现方式一：通过外部的定时器实现

缺点：代码有点割裂，代码尽量写在Vue实例里面，全局配置可以写在外面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <!-- <button @click="fang">点我变化透明度</button> -->
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
    })
    // 通过外部的定时器实现
    setInterval(()=>{
        vm.opacity -= 0.01
        if(vm.opacity <= 0) vm.opacity=1
    },16)
</script>
</html>

实现方式二：methods

methods中使用事件回调不可取，不符合需求。
此时，data中数据变化，重新解析模板，每个重新解析，又会再次调用开启定时器，如此一来，会极大消耗资源，并且屏幕出现鬼畜效果。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        {{change()}}
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
        methods:{
            change(){
                setInterval(()=>{
                    console.log("change")
                    this.opacity -= 0.01
                    if(this.opacity <= 0) vm.opacity=1
                },16)
            }
        }
    })
</script>
</html>

实现方式三：生命周期mounted

Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted，只调用了一次，开启了一个定时器。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted
        mounted(){
            console.log("mounted")
            setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <= 0) vm.opacity=1
            },16)
        },
    })
</script>

</html>

总结：

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this执行是vm 或组件实例对象。

在这里插入图片描述

分析生命周期

vm销毁后原生回调好使

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h2>当前的n值是{{n}}</h2>
       <button @click="add">点我n+1</button>
       <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        // // template全部替换el指向元素，的有一个根元素
        // template:`
        // <div>
        //     <h2>当前的n值是{{n}}</h2>
        //     <button @click="add">点我n+1</button>
        // </div>
        // `,
        data:{
            n:1
        },
        methods:{
            add(){
                this.n++
            },
            bye(){ // vm销毁后 原生回调好使
                console.log("bye")
                this.$destroy()
            }
        },
        beforeCreate() {
            // 此时vue中没有数据，还没绑定，vm实例中没有_data和n
            console.log("beforeCreate")
            // console.log(this)  // Vue
            // debugger
        },
        created() {
            // 此时vue实例上有了_data和n及其getset
            console.log("created")
            // console.log(this)
            // debugger
        },
        beforeMount() {
            // 这里边操作DOM无效
            console.log("beforeMount")
            // console.log(this)
            // // debugger
            // document.querySelector('h2').innerText = '哈哈'
        },
        mounted() {
            console.log("mounted")
            // console.log(this)
            // // 对DOM操作有效
            // document.querySelector('h2').innerText = '哈哈'
            // debugger
        },
        beforeUpdate() { //页面和数据未同步
            console.log("beforeUpdate")
            // console.log(this.n)
            // debugger
        },
        updated() { //页面和数据同步
            console.log("updated")
            // console.log(this.n)
            // debugger
        },
        beforeDestroy() { // 到了这个阶段 设计数据更新不会再起到效果
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log("destroyed")
        },
    })
</script>
</html>