1. property

元件的 data 選項是一個函式,返回一個物件，物件的屬性可以在模板中使用。

<template>
  <div class="hello">
    <div>{{test}}</div>
  </div>
</template>
 
<script>
export default {
  $data: null,
  data() {
    return { 
      test: '普通文字',
    }
  }
}

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

Vue 使用 $ 字首通過元件例項暴露自己的內建 API。它還為內部 property 保留 _ 字首。你應該避免使用這兩個字元開頭的的頂級 data property 名稱（當然你用了，直接會在編譯階段報錯，比如用了$data： error Key '$data' is reserved vue/no-reserved-keys）

2.方法

我們用 methods 選項向元件例項新增方法，它應該是一個包含所需方法的物件

• Vue 自動為 methods 繫結 this
  ，以便於它始終指向元件例項
• 定義 methods 時應避免使用箭頭函式，因為這會阻止 Vue 繫結恰當的 this 指向

<template>
  <div class="hello">
    <div @click="increment">{{count}}</div>
    <div @click="increment2">{{count2}}</div>
  </div>
</template>
 
<script>
export default {
  $data: null,
  data() {
    return { 
      test: '普通文字',
      count: 0,
      count2: 0,
    }
  },
  methods: {
    // 正常執行
    increment() {
      this.count++;
    },
 
    // this指向不對,this是undefined
    increment2: () => {
      this.count2++;
    }
  }
}
</script>