挂载

黑马程序员的书是这么简单的解释的：Vue实例创建后如果挂载点el存在那么就会对页面进行挂载 。
在这里说挂载不是重点而是vue生命周期的一个流程，是说mounted()函数能够在挂载的时候进行执行数据处理进行编辑逻辑代码。个人觉的这个解释还是不够形象还是不能让人一眼看懂它的用途。
生命周期（生命钩子）可以分为：创建、挂载、更新、销毁四个模块我个人觉的它的意思是让代码在何种时期进行调用也就是说：创建、挂载、更新、销毁是四个调用的时间段，按照业务需求来考虑使用哪一个函数。
2022-07-30T15:21:22.png

看这篇文章增加理解

挂载小例子：这是一个将h1标题设置为呼吸效果（透明度的改变）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>生命周期引入</title>
        <script type="text/javascript" src="vue.js">
            
        </script>
    </head>
    <body>
        <div id="app">
            <h1  :style="{opacity:opacity}">我会变透明度</h1>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip=false
        var vm=new Vue({
            el:'#app',
            data:{
                opacity:1
            },
            mounted(){
                setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0){
                        var nxh=setInterval(()=>{
                            this.opacity+=0.01
                            if(this.opacity>=1){
                                window.clearInterval(nxh)
                            }
                        },50)
                    }
                    console.log(this.opacity)
                },50)
            }
            
        })
    </script>
</html>