Vue中的data配置項

BLBALDMAN發表於2024-07-05
Vue

1、介紹：

在 Vue.js 中，data 選項是一個非常重要且核心的概念。data 是一個物件或工廠函式，用於儲存 Vue 例項或元件的可響應狀態。這意味著任何在 data 中宣告的屬性都將被 Vue 的響應系統所追蹤，當這些屬性的值發生改變時，依賴於這些屬性的檢視部分將會自動更新。也就說data可以為Vue儲存動態資料，當data資料發生變化時，例項或元件將會重新渲染，展現出更新後的data資料。

2、例項:

<!DOCTYPE html>
<html lang="en">
<head>
    //option物件中的data
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jsdocument/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
       new Vue({
           data:{
               message:"Hello Vue!"
           },
           template:'<h1>{{message}}</h1>'
       }).$mount("#app")
    </script>
</body>
</html>

對上面程式碼的解釋：

  • data是vue的物件，並且這個物件必須是存粹的物件。也就是說這個物件的組織形式必須是 key:value形式。
  • {{message}}是vue的插值語法，可以從data中提煉資料message，然後放到{{message}}對應位置
  • data可以是物件也可以是函式：

如果是物件那麼可以為如下情況：

//情況一:
data:{
  message:"hello vue!"
}
//取值
{{message}}

//情況二：
data:{
  user1:{
  name：'老杜'，
  age:18}
}
//取值：
{{user1.name}}
{{user1.age}}

//情況三“
data:{color['紅色'，'黃色'，'藍色']}
//取值：
{{color[0]}}

如果是函式，那麼是下面情況：

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello from component'
    };
  }
});

  • 執行過程：vue對template模板進行解析，如果遇到插值語法{{}}，那麼會從中data中讀取對應資料然後插入對應位置，最後生成html程式碼

  • 注意：
    私有性：當 data 是一個函式時，每個元件例項都有獨立的 data 副本，這保證了元件例項間的隔離。
    初始化：data 中的屬性應該在元件初始化時就存在，以便 Vue 能夠追蹤它們。
    可響應性：在 data 中定義的屬性是響應式的，這意味著當它們改變時，Vue 會檢測到變化並觸發檢視的更新。
    訪問方式：在元件的模板和方法中，你可以透過 this 關鍵字來訪問 data 中的屬性，例如 this.message。

相關文章