建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
#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 名稱(chēng)。
#方法
我們用 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 一樣可以在組件的模板中被訪(fǎng)問(wèn)。在模板中，它們通常被當(dāng)做事件監(jiān)聽(tīng)使用：
在上面的例子中，點(diǎn)擊 時(shí)，會(huì)調(diào)用 increment 方法。
也可以直接從模板中調(diào)用方法。就像下一章節(jié)即將看到的，通常換做計(jì)算屬性會(huì)更好。但是，在計(jì)算屬性不可行的情況下，使用方法可能會(huì)很有用。你可以在模板支持 JavaScript 表達(dá)式的任何地方調(diào)用方法：
{{ formatDate(date) }}
如果 toTitleDate 或 formatDate 訪(fǎng)問(wèn)任何響應(yīng)式數(shù)據(jù)，則將其作為渲染依賴(lài)項(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)用防抖：
但是，這種方法對(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: `
`
})名稱(chēng)欄目：創(chuàng)新互聯(lián)VUE3教程：Vue3.0DataProperty和方法
分享URL：http://m.fisionsoft.com.cn/article/cogjooh.html
