setup與data、methods三者間的關係

淡然置之發表於2024-05-02

Vue3裡的setup和Vue2中的語法data、methods有什麼關係？

  • setup和傳統的配置項可以同時寫 ==> data、methods和setup可以同時存在 ==> Vue2的選項式語法可以和Vue3新語法setup共存
  • 但是setup裡面不能用this
  • setup是在beforecreate之前進行的，data肯定能讀取到setup裡面的資料
  • 原來的寫法能讀取新的寫法，但是新寫法setup不能讀取原來的寫法

舉個例子，便於瞭解（但是最好不要這樣寫）：

<template>
  <div class="test">
    <p>{{ msg }}</p>
    <button @click="test">測試按鈕</button>
    <p>{{ read }}</p>
  </div>
</template>

<script lang="ts">
export default {
  name: "Test",// 元件名
  beforeCreate(){
    console.log('beforeCreate');
    
  },
  data() {
      return{
        msg:'哈哈哈',
        read:this.name, // data可以讀取setup的資料
        ce:1
      }
  },
  methods:{
    test(){
        console.log(this.age); // 18  methods也可以讀取setup的資料
    }
  },
  setup(){
    console.log(this); // setup中的this是undefined,不能寫成this.xxx
    console.log('setup');    

    let name = '小黑';
    let age = 18;
    // let no = ce; // 不能這樣寫,setup不能讀取data的資料
    // let no = this.ce // setup裡面不能用this
    
    return{name,age}
  }
};
</script>

<style>
</style>

相關文章