在Javascript中，用來聲明變量的有const和var兩種方式。它們雖然看起來很相似，但卻有著不同的作用方式和使用場合。

在Vue中，const和var同樣也有著不同的用處。

const變量

const a = 10;
a = 20; // 報錯

const關鍵字聲明的變量是常量，不可重新賦值。如果在聲明之后嘗試重新賦值，就會產生語法錯誤。

const b = {name: 'Tom'};
b.name = 'Jack'; // 沒有錯誤

然而，const聲明的變量中，如果是一個引用類型的變量，它的屬性是可以更改的。

需要注意的是，不能將一個const常量重新賦值為另一個不同的值，但可以更改它的屬性。

var變量

var a = 10;
a = 20; // 沒有錯誤

var關鍵字聲明的變量是可變的，所以可以隨時更改。這樣的變量是在整個函數或全局范圍內都是可見的。

function test(){
var a = 'hello';
if(true){
var a= 'world';
console.log(a); // world
}
console.log(a); // world
}

在上面的例子中，變量a在函數中定義，但是第二個if語句中，變量a被重新定義為另一個值，即‘world’。由于var變量是函數作用域，因此引用到的變量都是相同的變量。

const和var在Vue中的使用

在Vue中，const和var同樣有著不同的使用場景。

Vue的單文件組件（.vue文件）中可以使用const變量，這樣可以使代碼更加清晰和可讀。

<template>
<div>
<p>{{message}}</p>
</div>
</template>
<script>
const MSG = 'hello'
export default{
data(){
return{
message: MSG
}
}
}
</script>

在上面的例子中，將常量消息定義為一個const變量，這樣可以讓代碼變得更加清晰和易于維護。

然而，在Vue中使用var變量往往不是一個好習慣，因為它往往會給你帶來意想不到的麻煩。

在Vue的模板中，var變量也會被暴露給全局范圍內，這就容易與其他模板沖突，尤其是在大型應用程序中。

因此，在Vue中更推薦使用const變量，以確保變量的作用域盡可能地被限制在特定的模塊或函數內部。

總之，const和var變量雖然看起來很相似，但它們有著不同的作用方式和用處。在Vue中，const變量更適合在單文件組件中使用，而var變量可能會給你帶來一些意想不到的麻煩。理解區別與應用范圍是開發者對Javascript和Vue開發的一個必要趨勢。