Vue2與Vue3的語法對比
Vue.js是一款流行的JavaScript框架，通過它可以更加輕松地構建Web用戶界面。隨著Vue.js的不斷發展，Vue2的語法已經在很多應用中得到了廣泛應用。而Vue3于2020年正式發布，帶來了許多新的特性和改進，同時也帶來了一些語法上的變化。下面就讓我們來探討一下Vue2和Vue3之間的語法差異。
Composition API
Vue3推出的最重要的特性之一是Composition API，它可以幫助我們更好地組織和重用代碼。在Vue2中，我們通常使用Options API，按功能劃分代碼選項并將它們包含在組件選項中。而在Vue3中，我們可以使用Composition API，這種方式是基于邏輯而不是選項的。
下面是一個選項API的示例：
export default {data() {return { count: 0 }},methods: {increment() {this.count++}}
}
下面是一個使用Composition API的相同功能的示例：
import { reactive } from 'vue'export default {setup() {const state = reactive({ count: 0 })const increment = () => {state.count++}return { state, increment }}
}
setup() 函數
在Vue3中，setup() 函數是組件初始化的入口點，而在Vue2中，我們一般在不同的生命周期鉤子函數中處理組件的初始化邏輯。setup() 函數可以讓我們更好地控制變量的可見性，并且可以讓我們在組件實例化之前進行一些操作。
Teleport
Vue3中新加入了 Teleport 組件，它可以讓我們在DOM結構中輕松地處理模態框和下拉菜單等功能。 Teleport 具有兩個屬性，一個是 to 屬性，這個屬性指定了組件要移動到的位置；另一個是 disabled 屬性，可以防止組件移動到不合適的位置。
以下是一個 Teleport 組件的示例：
<template><teleport to="body"><div class="modal"><h4>Hello World</h4><p>Welcome to the world of Vue 3.</p></div></teleport>
</template>
Fragments
Vue3中還引入了另一個實用的特性，即Fragments。 一個Vue2組件只能有一個頂級標簽，如果你需要在一個組件中使用多個 HTML 元素，那你必須將它們放在一起并將它們包裝在一個頂級標簽中。但是，在Vue3中，你可以在組件中使用多個頂級標簽，并將它們組合成一個Fragment。
以下是一個使用Fragment的示例：
<template><><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></>
</template>
計算屬性 (Computed Properties)
在Vue中，計算屬性（Computed Properties）是用來處理需要根據其他響應式數據計算得出的屬性。
在Vue2中，我們使用computed選項來定義計算屬性。計算屬性會自動響應數據的變化并進行重新計算。
例如，在Vue2中定義一個計算屬性：
<template><div><p>數量: {{ count }}</p><p>計算后的總數: {{ sum }}</p></div>
</template><script>
export default {data() {return {count: 5,price: 10}},computed: {sum() {return this.count * this.price}}
}
</script>
在Vue3中，計算屬性的寫法略有不同，我們可以使用computed函數來定義計算屬性：
<template><div><p>數量: {{ count }}</p><p>計算后的總數: {{ sum }}</p></div>
</template><script>
import { computed, reactive } from 'vue'export default {setup() {const data = reactive({count: 5,price: 10})const sum = computed(() => {return data.count * data.price})return {...data,sum}}
}
</script>
無論是在Vue2還是Vue3中，計算屬性的定義方式都允許我們根據需要動態計算數據，并確保計算結果與依賴的響應式數據保持同步。
監聽屬性 (Watchers)
在Vue中，我們可以使用watch選項來監聽數據變化并執行相應的操作。
在Vue2中，我們使用watch選項來定義一個Watcher：
<template><div><p>姓名: {{ name }}</p><p>年齡: {{ age }}</p></div>
</template><script>
export default {data() {return {name: '張三',age: 25}},watch: {name(newVal, oldVal) {console.log(`姓名從 ${oldVal} 變為 ${newVal}`)},age(newVal, oldVal) {console.log(`年齡從 ${oldVal} 變為 ${newVal}`)}}
}
</script>
在Vue3中，我們使用watch函數來定義一個Watcher：
<template><div><p>姓名: {{ name }}</p><p>年齡: {{ age }}</p></div>
</template><script>
import { reactive, watch } from 'vue'export default {setup() {const data = reactive({name: '張三',age: 25})watch(() => data.name, (newVal, oldVal) => {console.log(`姓名從 ${oldVal} 變為 ${newVal}`)})watch(() => data.age, (newVal, oldVal) => {console.log(`年齡從 ${oldVal} 變為 ${newVal}`)})return {...data}}
}
</script>
無論是在Vue2還是Vue3中，我們可以使用Watcher來監聽數據的變化，并在數據發生改變時執行特定的操作。Vue3中的watch函數使用了更為函數式的API風格，需要將要監聽的數據包裝在一個函數中并返回。
)
