Vue.js 是一款非常流行的前端框架，它可以幫助我們建立交互式、動態的用戶界面。近期，Vue.js 推出了許多新屬性，讓開發者們更加容易地構建高性能、易維護的 Web 應用程序。

一個新的屬性是 v-model 的修飾符 .trim、.number、.lazy，它們分別用于控制用戶輸入的數據類型和格式。trim 可以去除輸入的首尾空格；number 可以將輸入的值轉換為 Number 類型；lazy 可以延遲輸入數據的同步，只在用戶完成輸入后才進行同步操作。這樣，我們就可以在用戶輸入數據之前對數據做一些預處理，以確保其符合我們的要求。

Vue.js 還引入了 v-slot 指令，它可以在組件之間共享 HTML 內容，極大地減少了代碼的重復性。使用 v-slot 的時候可以有一個明確的詞語作為插槽名稱:

在 Vue.js 3 中，一些常用的指令被重新實現，以便創造出更好的開發體驗和功能性。例如，v-show 指令更新時，不再將所選元素從 DOM 中移除，而是通過添加 display:none 樣式來隱藏元素，以加快渲染速度。同樣，v-if 指令也采用了新的渲染策略，它只會渲染一次，而不是每次都重新渲染。

Show it!
Be showed!

在 Vue.js 2 中，computed 和 watch 都是用來監控數據變化并進行響應的。其中，computed 主要用于監聽數據的變化并計算新值，而 watch 可以監視特定的數據變化并執行操作。但是，在 Vue.js 3 中，computed 和 watch 被升級為了新的選項語法，比如設置監聽器的時候使用 watch:{prop:callback}，而 computed 屬性使用了新的 ref 標記:

export default {
props: ['title'],
setup(props) {
const titleRef = ref(props.title)
watch(titleRef, (val) =>{
console.log('New title:', val);
})
return {
titleRef
}
},
}

最后，在 Vue.js 3 中，我們還可以使用 ref() API 來訪問 DOM 元素。ref 本來就用來標記組件實例或 HTML 標簽，現在它還可以用來引用 Vue 實例中的其他數據。ref 返回一個響應式對象，可以被用于在模板代碼中使用：