---
# System prepended metadata

title: Vue3 - Lesson 1
tags: [Vue3]

---

---
title: Vue3 - Lesson 1 
tags: Vue3
---
Vue3 - Lesson 1
==

阿哈哈哈哈 還沒寫
# Javascript:  const let var 

>在學習的道路上，各個領域都會想精進一下，JS是一個前端工程師不可或缺的技能
>宣告變數的使用方式、型態更是基本中的基本。今天就要來分享一下傳統變數宣告 var 與 >JavaScript ES6 新的變數宣告方式 let 與 const 有什麼不同之處。
>
>這邊用最簡單方式告訴各位

 


# 傳統變數宣告 var



<h3>我使用vscode來做範例

![](https://i.imgur.com/F8zfOvK.jpg)

最上面用x全域變數，在ES6推出後有區塊域的概念與let寫法，避免掉var汙染全域變數的副作用</h3>


# ES6 優缺點

* 優點
    *  解決ES5的BUG與不變之處
    *  盡量避免汙染全域，維護性高，不會污染其他開發者    

* 缺點
    * 舊版瀏覽器問題:使用Babel + Gulp解決



</br>
</br>


# ES6 let 的特性

<h4>
let 用來宣告區塊裡的變數，即區域變數，所謂{區塊}指的是{xxx} <= 裡面的東西
<br></br>
使用vscode舉例

![](https://i.imgur.com/tRdqNly.jpg)

上面成果，在console結果為1與0

首先第六行 **console.log(x)** 的結果為 1，因為 a 在第五行的時候，被重新賦予值為 1

最下面的 **console.log(x)** 的答案為何不是1

因為在 **btn(){xxx}** 裡面x只為存活在{} <= 大括號裡面
不會去改變外面x的值，因此第二個 **console.log(x)** 傳0的結果

</h4>


# ES6 const 的特性

<h4>const 是唯獨變數(不能做修改)，用在一些不能被跟改的變數 如:url網址，計算等等
<br></br>
有個例外，就是{物件}跟{陣列}會被變更，可以使用freeze()解決

![](https://i.imgur.com/dEuSbJb.jpg)

如果拿掉會被更改

![](https://i.imgur.com/MlrHinN.jpg)

有哪些情況會想要使用 **freeze()** 通常是預設不想被其他東西干擾時候， 可以使用const與freeze (物件陣列)特性
</h4>


# const let var 同個區塊 不能重複命名

<h4>
使用vscode來示範

![](https://i.imgur.com/fQUOlZT.jpg)
![](https://i.imgur.com/1bqqLQE.jpg)
![](https://i.imgur.com/X9HGLBq.jpg)

在照片看的出來，使用let const 會顯示x被賦予值
var 可以重新被賦予新的值
</h4>

# 總結

在ES6推出之後，寫JavaScript時可以使用let與const

這麼做除了逼免var會汙染到全域，也可以增加代碼的解讀性，

看到const宣告變數時，就知道這個是變數不能做改變的# Javascript:  const let var 

>在學習的道路上，各個領域都會想精進一下，JS是一個前端工程師不可或缺的技能
>宣告變數的使用方式、型態更是基本中的基本。今天就要來分享一下傳統變數宣告 var 與 >JavaScript ES6 新的變數宣告方式 let 與 const 有什麼不同之處。
>
>這邊用最簡單方式告訴各位

&nbsp;


# 傳統變數宣告 var



<h3>我使用vscode來做範例

![](https://i.imgur.com/F8zfOvK.jpg)

最上面用x全域變數，在ES6推出後有區塊域的概念與let寫法，避免掉var汙染全域變數的副作用</h3>


# ES6 優缺點

* 優點
    *  解決ES5的BUG與不變之處
    *  盡量避免汙染全域，維護性高，不會污染其他開發者    

* 缺點
    * 舊版瀏覽器問題:使用Babel + Gulp解決



</br>
</br>


# ES6 let 的特性

<h4>
let 用來宣告區塊裡的變數，即區域變數，所謂{區塊}指的是{xxx} <= 裡面的東西
<br></br>
使用vscode舉例

![](https://i.imgur.com/tRdqNly.jpg)

上面成果，在console結果為1與0

首先第六行 **console.log(x)** 的結果為 1，因為 a 在第五行的時候，被重新賦予值為 1

最下面的 **console.log(x)** 的答案為何不是1

因為在 **btn(){xxx}** 裡面x只為存活在{} <= 大括號裡面
不會去改變外面x的值，因此第二個 **console.log(x)** 傳0的結果

</h4>


# ES6 const 的特性

<h4>const 是唯獨變數(不能做修改)，用在一些不能被跟改的變數 如:url網址，計算等等
<br></br>
有個例外，就是{物件}跟{陣列}會被變更，可以使用freeze()解決

![](https://i.imgur.com/dEuSbJb.jpg)

如果拿掉會被更改

![](https://i.imgur.com/MlrHinN.jpg)

有哪些情況會想要使用 **freeze()** 通常是預設不想被其他東西干擾時候， 可以使用const與freeze (物件陣列)特性
</h4>


# const let var 同個區塊 不能重複命名

<h4>
使用vscode來示範

![](https://i.imgur.com/fQUOlZT.jpg)
![](https://i.imgur.com/1bqqLQE.jpg)
![](https://i.imgur.com/X9HGLBq.jpg)

在照片看的出來，使用let const 會顯示x被賦予值
var 可以重新被賦予新的值
</h4>

# 總結
<h4>

在ES6推出之後，寫JavaScript時可以使用let與const

這麼做除了逼免var會汙染到全域，也可以增加代碼的解讀性，

看到const宣告變數時，就知道這個是變數不能做改變的

用圖片的範例比較多，可以增加讀者方便閱讀 謝謝~
</h4>