Vue 3.0 Data Property和方法

#Data Property

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

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 的值也會(huì)更新 $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)建時(shí)被添加，所以你需要確保它們都在 data 函數(shù)返回的對(duì)象中。必要時(shí)，要對(duì)尚未提供所需值的 property 使用 null、undefined 或其他占位的值。。

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

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

#方法

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

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

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

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

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

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

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

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

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

#防抖和節(jié)流

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

如果某個(gè)組件僅使用一次，可以在 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>

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

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