Vue.js作為一款前端框架,具有很好的數據驅動能力。在Vue中,我們可以通過data選項來指定各種數據,這些數據可以被用作組件的狀態或是傳遞到其他組件。那么data參數到底是什么呢?
new Vue({ data: { message: 'Hello, Vue!' } })
上面的代碼中,我們使用data選項定義了一個名為message的數據,它的值是'Hello, Vue!'。在Vue實例中,我們可以通過this.message來訪問這個數據,例如在模板中:
{{ message }}
在上面的例子中,我們將Vue實例掛載到id為app的元素上,并在模板中使用{{ message }}的形式來渲染這個數據。當頁面加載完成后,我們就可以看到頁面上顯示的是Hello, Vue!。
需要注意的是,data選項中定義的數據都是響應式的。這個響應式的實現是通過Vue利用ES5的Object.defineProperty方法來實現的,當數據發生變化時,Vue會自動觸發相關的更新。
在實踐中,我們可以將data選項中的數據分為兩類:一類是一開始就不會發生變化的常量數據,例如某個固定的配置項,一般定義為普通的JavaScript對象;另一類是可能會發生變化的數據,例如用戶的輸入、后臺的數據請求等,這類數據定義為返回一個對象的函數,每次訪問時都能夠得到最新的數據。
new Vue({ data() { return { user: null } }, methods: { getUser() { // 請求后臺數據 axios.get('/api/user').then(resp =>{ this.user = resp.data }) } } })
上面的代碼中,我們使用data選項將user定義為一個返回一個初始值為null的對象的函數。在methods中,我們定義了一個getUser方法,當執行這個方法時,會向后臺發送請求,然后將請求返回的數據賦值給user。由于user是響應式的,所以當user的值發生改變時,頁面中與user相關的地方也會自動更新。