setup与data、methods三者间的关系

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>