Vue.js 是一個流行的 JavaScript 框架，它可以用于創建交互式的 Web 應用程序。Vue 提供了許多實例選項，這些選項可以幫助開發者解決實際問題。下面是一些常見的實例選項。

data

data 選項是一個函數，它返回組件的初始數據。這個函數返回的數據將成為組件的響應式數據，也就是說，當數據發生變化時，視圖會自動更新。在 data 函數中，可以使用 this 關鍵字來訪問組件實例。

data() {
return {
message: 'Hello, Vue!'
}
}

computed

computed 選項用于定義基于響應式數據的計算屬性。計算屬性是一種在模板中使用變量的方法，這樣可以使模板更加簡潔。每次訪問計算屬性時，都會重新計算該屬性的值。

computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}

methods

methods 選項用于定義組件的方法。定義的方法可以在模板中使用，并且可以訪問組件實例中的響應式數據。方法中的 this 關鍵字指向組件實例。

methods: {
sayHi() {
alert('Hi, ' + this.name)
}
}

watch

watch 選項用于觀察組件實例上的屬性的變化，并在發生變化時執行回調函數。watch 屬性是一個對象，鍵是被觀察的屬性名，值是回調函數。回調函數獲得兩個參數：新值和舊值。

watch: {
count(newValue, oldValue) {
console.log('count 改變了', newValue, oldValue)
}
}

props

props 選項用于定義組件的屬性。屬性是組件和父組件之間通信的一種方式。在組件內部，通過 this.$props 對象訪問所有屬性。在父組件中，可以通過綁定屬性的方式將屬性傳遞給子組件。

props: {
message: {
type: String,
required: true
}
}

provide / inject

provide 和 inject 選項用于在父組件和子組件之間傳遞數據。provide 選項是一個函數，返回一個對象，inject 選項是一個數組，包含需要注入的屬性名。子組件可以通過 this.xxx 訪問注入的屬性。

// 父組件
provide() {
return {
message: 'Hello, Vue!'
}
}
// 子組件
inject: ['message']