Data屬性和方法
Data屬性
在組件中Data是一個函數，Vue會在創建組件實例時調用它。Data函數應該返回一個對象，Vue會將這個對象包含進它的響應式系統並用$data存儲在應用實例中。為了方便，對象中的任何頂級屬性都會通過組件直接暴露出來：
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 這些實例屬性僅會在當前實例首次創建時加載，所以你要確保它們已在data函數中被定義。如果有必要，對於一些暫時沒有值的變量使用null,undefined或其他其他占位符賦值。
你也可以直接新增一個屬性到data中，但是這個屬性沒有備份到響應式的$data中，所以它不會自動被Vue響應式系統管理。
Vue使用$前綴通過組件實例暴露內置的API。同時它也為內部屬性保留了_前綴。你要避免在data的頂部屬性中使用這兩個前綴。
方法
我們使用methods選項在組件實例中添加方法。它是一個包含一系列方法的對象：
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自動綁定指向組件實例的this對象。這可以保證當在方法中使用事件監聽或方法回調時在方法有正確的this值。定義methods時就避免使用箭頭函數，它會阻止Vue綁定正確的this。
像其他組件實例屬性一樣，方法在組件模板內部可訪問。在組件內部最常用的用法是當作事件監聽：
<button @click="increment">投票</button> 上面這個例子，當按鈕點擊時，increment方法將被調用。
也可以在方模板中直接調用方法。馬上我們會看到，平時我們使用計算屬性來代替方法。但在一些計算屬性不能使用的場景下直接使用方法還是比較有用的。你可以在模板內任意地方使用JavaScript表達式來調用方法：
<span :title="toTitleDate(date)"> {{ formatDate(date) }} </span> 如果toTitleDate或formatDate訪問任意響應式數據定義，它將會被渲染成模板依賴，就像它們直接在模板中使用一樣。（如上例子中兩個方法的參數：date）
模板中調用方法不應該任何副作用，像更改Data屬性或觸發異步進程，如果你想這么做，應該使用生命周期勾子代替。
方法 - 防抖動及節流
提示
函數防抖(debounce)：
在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時；典型的案例就是輸入搜索：輸入結束后n秒才進行搜索請求，n秒內又輸入的內容，就重新計時。
函數節流(throttle)：
規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有一次生效； 典型的案例就是鼠標不斷點擊觸發，規定在n秒內多次點擊只有一次生效。
Vue沒有內置防抖動及節流，但你可以通過如類庫Lodash來實現。
下面這個示例組件只會使用一次，在方法中可以直接使用防抖動：
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>vue demo4</title> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script> </head> <body> <div id="app"> <input type="text" @input="changing" /> </div> </body> <script type="text/javascript"> const app = { data() { return { count: 0 } }, methods: { changing: _.debounce(function(){ console.log("輸入發生改變："+ (++this.count) + "次") },500) } } Vue.createApp(app).mount("#app") </script> </html> 看看執行結果：
但在多個組合復用時會產生問題，因為它們共用相同的防抖動函數。為了保持各組件相互獨立，我們可以在created生命周期勾子中進行防抖動處理：
app.component('save-button', { created() { // Debouncing with Lodash this.debouncedClick = _.debounce(this.click, 500) }, unmounted() { // Cancel the timer when the component is removed this.debouncedClick.cancel() }, methods: { click() { // ... respond to click ... } }, template: ` <button @click="debouncedClick"> Save </button> ` })