了解jQuery、Vue、javaScript 执行顺序

235 阅读1分钟

区别:

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

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