分別使用jQuery、Vue寫時鐘小例子
阿新 • • 發佈：2020-09-16
Vue是一個神奇的東西，你只要有一點點html,css,javascript知識就可以使用Vue，而且還很好用。
今天老師上課講了Vue第一節基礎知識，就能用一點點知識用兩種方法寫出時鐘。加上我們之前也用jQuery寫過時鐘，我就想到將它兩的程式碼進行對比。
注：時鐘程式碼均為最原始的時鐘，為了突出其差異性而不對樣式進行細究。
1.jQuery程式碼：
<script src="./jquery-3.5.0/jquery-3.5.0.js"> </script> <script> window.onload=function(){ function clock() { var date=new Date(); document.getElementById("timeShow").innerText=""+date; } setInterval(clock,1000); } </script> </head> <body> <div id="timeShow"> </div> </body> </html>
jQuery程式碼需要將dom元素提取出來，然後用間歇呼叫進行動態設定。
2.Vue程式碼一：
<script src="../js/vue-2.6.12.js"></script> </head> <body> <div id="app"> {{time}} </div> <script> let vm=new Vue({ el:"#app", data:{ msg:'hello', name:'zhangsan', time:new Date() }, methods:{ sayName(){ console.log(this.name); }, } }); // 一般不會在外部呼叫vm //修改msg setInterval(() => { vm.time=new Date(); }, 1000); </script> </body> </html>
Vue程式碼將time放進一個變數time中，每次只要修改data中time的值就可實現時鐘動態變化。這種方法已經比jQuery程式碼感覺清爽了好多。但是就像程式碼中註釋的那樣，一般不會在外部呼叫vm,所以這種方法有待改進。
接著老師又講了生命週期函式（鉤子函式）。於是有了下面的程式碼：
<script src="../js/vue-2.6.12.js"></script> </head> <body> <div id="app"> {{time}} </div> <script> new Vue({ el:"#app", data:{ msg:'hello', time:new Date() }, //鉤子函式 beforeCreate(){ console.log(this.msg,"beforeCreate"); }, created(){ setInterval(() => { this.time= new Date(); }, 1000); } }); </script> </body> </html>
程式碼中 beforeCreate()、created()函式都是鉤子函式，除此之外還有beforeMount（）、mounted（）、beforeUpdated（）、updated（）、beforeDestory（）、destory（）函式。這些函式不用呼叫，達到某種程度會自動呼叫。所以不用寫到method裡等待呼叫。這種方式使虛擬dom節點在建立的 時候就能夠間歇修改time值，十分好用。