#Data Property

組件的 data 選項是一個函數(shù)。Vue 在創(chuàng)建新組件實(shí)例的過程中調(diào)用此函數(shù)。它應(yīng)該返回一個對象，然后 Vue 會通過響應(yīng)性系統(tǒng)將其包裹起來，并以 $data 的形式存儲在組件實(shí)例中。為方便起見，該對象的任何頂級 property 也直接通過組件實(shí)例暴露出來：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})


const vm = app.mount('#app')


console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4


// 修改 vm.count 的值也會更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5


// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6

這些實(shí)例 property 僅在實(shí)例首次創(chuàng)建時被添加，所以你需要確保它們都在 data 函數(shù)返回的對象中。必要時，要對尚未提供所需值的 property 使用 null、undefined 或其他占位的值。。

直接將不包含在 data 中的新 property 添加到組件實(shí)例是可行的。但由于該 property 不在背后的響應(yīng)式 $data 對象內(nèi)，所以 Vue 的響應(yīng)性系統(tǒng)不會自動跟蹤它。

Vue 使用 $ 前綴通過組件實(shí)例暴露自己的內(nèi)置 API。它還為內(nèi)部 property 保留 _ 前綴。你應(yīng)該避免使用這兩個字符開頭的的頂級 data property 名稱。

#方法

我們用 methods 選項向組件實(shí)例添加方法，它應(yīng)該是一個包含所需方法的對象：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向該組件實(shí)例
      this.count++
    }
  }
})


const vm = app.mount('#app')


console.log(vm.count) // => 4


vm.increment()


console.log(vm.count) // => 5

Vue 自動為 methods 綁定 this，以便于它始終指向組件實(shí)例。這將確保方法在用作事件監(jiān)聽或回調(diào)時保持正確的 this 指向。在定義 methods 時應(yīng)避免使用箭頭函數(shù)，因?yàn)檫@會阻止 Vue 綁定恰當(dāng)?shù)?this 指向。

這些 methods 和組件實(shí)例的其它所有 property 一樣可以在組件的模板中被訪問。在模板中，它們通常被當(dāng)做事件監(jiān)聽使用：

<button @click="increment">Up vote</button>

在上面的例子中，點(diǎn)擊 <button> 時，會調(diào)用 increment 方法。

也可以直接從模板中調(diào)用方法。就像下一章節(jié)即將看到的，通常換做計算屬性會更好。但是，在計算屬性不可行的情況下，使用方法可能會很有用。你可以在模板支持 JavaScript 表達(dá)式的任何地方調(diào)用方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

如果 toTitleDate 或 formatDate 訪問任何響應(yīng)式數(shù)據(jù)，則將其作為渲染依賴項進(jìn)行跟蹤，就像直接在模板中使用過一樣。

從模板調(diào)用的方法不應(yīng)該有任何副作用，比如更改數(shù)據(jù)或觸發(fā)異步進(jìn)程。如果你想這么做，應(yīng)該換做生命周期鉤子。

#防抖和節(jié)流

Vue 沒有內(nèi)置支持防抖和節(jié)流，但可以使用 Lodash 等庫來實(shí)現(xiàn)。

如果某個組件僅使用一次，可以在 methods 中直接應(yīng)用防抖：

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js" rel="external nofollow" ></script>
<script>
  Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函數(shù)
      click: _.debounce(function() {
        // ... 響應(yīng)點(diǎn)擊 ...
      }, 500)
    }
  }).mount('#app')
</script>

但是，這種方法對于可復(fù)用組件有潛在的問題，因?yàn)樗鼈兌脊蚕硐嗤姆蓝逗瘮?shù)。為了使組件實(shí)例彼此獨(dú)立，可以在生命周期鉤子的 created 里添加該防抖函數(shù):

app.component('save-button', {
  created() {
    // 用 Lodash 的防抖函數(shù)
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除組件時，取消定時器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 響應(yīng)點(diǎn)擊 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})