setup() 和 ref() 的使用

使用setup()新語法，可以不需像之前vue2語法需要寫data了。

<template>
  <div class="home">
    <div>語言名稱: {{classname}}</div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Home',
  setup(props) {
    const classname = ref('javascript')
    return {
      classname,
    }
  },
}
</script>

vue2中聲明的變量需要放在data中聲明使用。

vue3.X在setup函數中，通過 ref 和 rective 代替以前的 data 語法，return返回出去后，才可以在模板頁面上直接使用，包括變量和方法。

setup() 方法是在 beforeCreate() 生命周期函數之前執行的函數；

它接收兩個參數 props 和 context。
它里面不能使用 this，而是通過 context 對象來代替當前執行上下文綁定的對象。
context 對象有四個屬性：attrs、slots、emit、expose

使用 setup 語法糖時，不用寫 export default {}，只需要 import 子組件就直接使用，不需要像以前一樣在 components 里注冊。

vue2中修改data中的變量，在methods中定義方法，通過事件觸發修改變量。

vue3.X中邏輯：

通過ref聲明的變量在賦值的時候，是對變量.value去進行賦值和讀取操作；

事件方法不在需要聲明在methods中，直接寫在setup函數中；

 

通過ref聲明的變量更改需要通過變量.value的方式去修改。很不符合vue2之前書寫代碼的習慣。vue3.X中提供的reactive方法更符合些。