了解jQuery、Vue、javaScript 执行顺序

末蓝、 2022-11-29 13:28 513阅读 0赞

## 区别： ##

**1、Vue 中的 mounted**

> mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。

**2、 javaScript 中的 onload**

> onload 事件会在页面或图像加载完成后立即发生。

**3、JQuery 中的 load 与 ready（load先执行 ready后执行）**

> 1、ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。  
> 2、load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

**1、话不多说，直接上代码**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>运行机制</title>
        <script type="text/javascript" src="https://carlifecenter.sinosig.com/h5/page/static/js/jquery.js"></script>
        <script type="text/javascript" src="https://carlifecenter.sinosig.com/h5/page/static/js/vue.js"></script>
       
    </head>
    
    <body>
        <div id="box">
    
        </div>
    </body>
    <script>
        vm  = new Vue({ 
            el:'#box',
            data(){ 
                return { 
    
                }
            },
            mounted() { 
                console.log('mounted')
            },
            methods: { 
                
            },
        })
        $(document).ready(function() { 
            console.log('ready')
        })
        
        window.onload = function () { 
            console.log('javaScript onLoad')
        }
        $(window).on('load',function() { 
            console.log('JQuery load')
        })
        
    </script>
    <style>
        #box { 
            background-color: bisque;
        }
    </style>
    
    </html>

**如图所示，他们的顺序如下**

mounted ⇒ javaScript onLoad ⇒ JQuery load ⇒ ready

**做前端开发，执行顺序很重要、很重要、很重要，在这里记录一下，一定切记。**