Vue.js 的 data 與 methods

Blog / 2021-01-08

在一開始建立 Vue Instance 的時候,Vue.js 會開始掌控 HTML 的某一個區塊,在一些範例程式碼很常見的就是 #app

在建立 Vue Instance 之前,我們會先做好一些 data 跟 methods 的設定。
這些 data 就是這塊 HTML block 會用到的資料:

而這些 methods 則是這個 HTML block 會用到的功能、互動。

Vue Instance 主要架構:data / methods

我們自己在寫 Javascript 的時候,會有很多的 variables 跟 functions 散落各處。當專案越寫越大,我們難以維護的時候,就會自己想辦法整理自己的程式碼。

Vue.js 知道這點,所以在建立 Vue Instance 的時候,就讓我們把 data 跟 methods 都先設定好,集中管理,不管是開發還是維護,都很乾淨俐落。

Vue.js 2 跟 3 的差異:data 的寫法

2 跟 3 在開發體驗上,其實差異不大,即使在建立 Vue Instance 的時候也只有在 data 的部分有做調整:

Vue 2 的 data 是一個 Object、Vue 3 的 data 則是一個 回傳 Object 的 function

直接取用 data / methods 的方法

在我們建立 Vue Instance 之後,在 HTML template 可以直接取用 date & methods 之外,我們也可以直接在 Javascript 裡面使用。

取用方法:

$data

$methods

vm.$data.foo / vm.$methods.bar()
或是直接 vm.foo / vm.bar() 都是可以的喔

MVVM

MVVM 是 Vue.js 很重要的架構,也是他好用的原因之一。
通常我們開發的時候,頂多把會用到的變數整理起來 (Model)、用一些 template 的工具來做畫面 (View),但 Model 跟 View 彼此都還是分開的。

但是 Vue.js 多了 ViewModel 這一層,他會自己去看 Model 有沒有變動,一旦有變動,就會 自動更新 View。這也是為什麼我們在開發 Vue.js 的時候,都是用 data 在掌控畫面的原因。(多虧了 ViewModel)

本內容擷取自 Vue.js 123
有興趣學習 Vue.js 的朋友歡迎去看看喔:)

background

訂閱「網頁15天」最新技術分享

訂閱