建站
咨詢
售后
建站咨詢
新聞中心
#Data Property
組件的 data 選項是一個函數(shù)。Vue 在創(chuàng)建新組件實例的過程中調(diào)用此函數(shù)。它應(yīng)該返回一個對象，然后 Vue 會通過響應(yīng)性系統(tǒng)將其包裹起來，并以 $data 的形式存儲在組件實例中。為方便起見，該對象的任何頂級 property 也直接通過組件實例暴露出來：
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 這些實例 property 僅在實例首次創(chuàng)建時被添加，所以你需要確保它們都在 data 函數(shù)返回的對象中。必要時，要對尚未提供所需值的 property 使用 null、undefined 或其他占位的值。。
直接將不包含在 data 中的新 property 添加到組件實例是可行的。但由于該 property 不在背后的響應(yīng)式 $data 對象內(nèi)，所以 Vue 的響應(yīng)性系統(tǒng)不會自動跟蹤它。
Vue 使用 $ 前綴通過組件實例暴露自己的內(nèi)置 API。它還為內(nèi)部 property 保留 _ 前綴。你應(yīng)該避免使用這兩個字符開頭的的頂級 data property 名稱。
#方法
我們用 methods 選項向組件實例添加方法，它應(yīng)該是一個包含所需方法的對象：
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向該組件實例
this.count++
}
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5 Vue 自動為 methods 綁定 this，以便于它始終指向組件實例。這將確保方法在用作事件監(jiān)聽或回調(diào)時保持正確的 this 指向。在定義 methods 時應(yīng)避免使用箭頭函數(shù)，因為這會阻止 Vue 綁定恰當(dāng)?shù)?this 指向。
這些 methods 和組件實例的其它所有 property 一樣可以在組件的模板中被訪問。在模板中，它們通常被當(dāng)做事件監(jiān)聽使用：
在上面的例子中，點擊 時，會調(diào)用 increment 方法。
也可以直接從模板中調(diào)用方法。就像下一章節(jié)即將看到的，通常換做計算屬性會更好。但是，在計算屬性不可行的情況下，使用方法可能會很有用。你可以在模板支持 JavaScript 表達(dá)式的任何地方調(diào)用方法：
{{ formatDate(date) }}
如果 toTitleDate 或 formatDate 訪問任何響應(yīng)式數(shù)據(jù)，則將其作為渲染依賴項進行跟蹤，就像直接在模板中使用過一樣。
從模板調(diào)用的方法不應(yīng)該有任何副作用，比如更改數(shù)據(jù)或觸發(fā)異步進程。如果你想這么做，應(yīng)該換做生命周期鉤子。
#防抖和節(jié)流
Vue 沒有內(nèi)置支持防抖和節(jié)流，但可以使用 Lodash 等庫來實現(xiàn)。
如果某個組件僅使用一次，可以在 methods 中直接應(yīng)用防抖：
但是，這種方法對于可復(fù)用組件有潛在的問題，因為它們都共享相同的防抖函數(shù)。為了使組件實例彼此獨立，可以在生命周期鉤子的 created 里添加該防抖函數(shù):
app.component('save-button', {
created() {
// 用 Lodash 的防抖函數(shù)
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 移除組件時，取消定時器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 響應(yīng)點擊 ...
}
},
template: `
`
})新聞名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0DataProperty和方法
地址分享：http://www.dlmjj.cn/article/cogjooh.html
