vue.js引用出错-script代码块放在head和body中的区别

这篇随笔是为了记录vue.js引用出错的原因，看到最后原来是vue.js代码放在head中不能正常使用，要最后发现要将其放在body中才行。。。

原来是js代码放在head和body中的区别问题，占个坑，来埋点个人理解。

 

现在个人将script块分为js执行代码和js函数两大块。

例如：

js执行代码在页面中可能长成这个鬼样：

<script>
    var hello = "helloworld";
</script>

而js函数则是这副嘴脸:

<script>
function sayhello(){
    var hello = "helloworld";
}
</script>

 

为了方便理解，现在将js和html比喻如下：

实际行为=js执行代码

指导手册=js函数

组装赛车=html页面

 

以下对js代码放在head和body中的区别进行具体解释：

1.放在head中，则script在页面加载之前就有了，分情况，

　　如果script块中是js执行代码，则相当于实际行为顺序执行（不可逆），但组装赛车只有零零散散的零件陆陆续续的到货，并没有完全到货，导致某些实际行为需要操作的零件找不到，即组装赛车的某些关键步骤被省略了。

　　如果script块中是js函数，则相当于指导手册先于组装赛车先到货，因为只是书面的指导手册，没有实际执行什么行为，所以最终不会有实际行为的缺失。

 

2.放在body中，则script在页面加载之后才有，同样分情况，

　　如果script块中是js执行代码，因为此时组装赛车的所有零件都已经到货了，所以按实际行为来操作，所有行为都可以成功的执行。

　　如果script块中是js函数，则相当于组装赛车先到货，指导手册后到货，之后按照指导手册进行零件拼装即可成功组装成赛车，同样不会有实际行为的缺失。

 

所以，如果页面引入的是js函数，那么不管置于head还是body中，都没有区别。

但是如果是js执行代码，那就要考虑dom节点是否存在的情况了。