二、理解setup语法糖

1、setup中的this是什么？

<script lang="ts">
  export default {
    name:'HelloWorld',
    setup(){
      console.log('vue3_this:',this) 
    }
  }
</script>

打印结果：

分析：在 Vue 3 中，this 关键字是不存在的。Vue 3 是基于 Composition API 的，而不是基于 Options API 的。在 Options API 中，我们使用 this 来访问组件实例，但在 Composition API 中，我们使用 setup 函数来定义组件的逻辑，而不是使用 this。

2、setup与Options API的关系

//vue2写法
export default {
  data() {
    return { ...};
  },
  computed: { ...},
  watch: { ...},
  methods: { ...},
  created() {...}
  }
  //vue3写法
<script lang="ts">
export default {
  name: 'HelloWorld',
  setup() {
    // 1、定义数据（vue2在data中）
    let type = '基站空调'
    let computerTemp = 35
    // 2、定义方法（vue2在methods中）
    function changetype() {
      type = '机房空调'
      console.log('type~~', type)
    }
    // 2、定义方法（vue2在methods中）
    function changecomputerTemp() {
      computerTemp += 2
      console.log('computerTemp~~', computerTemp)
    }
    // 3、返回数据和方法
    return { type, computerTemp, changecomputerTemp, changetype }
  }
}
</script>

3、setup语法糖

*将setup写在<script lang="ts" setup name="HelloWorld">里面，不需要 return*

<script lang="ts" setup name="HelloWorld">
// 1、定义数据（vue2在data中）
let type = '基站空调'
let computerTemp = 35

// 2、定义方法（vue2在methods中）
function changetype() {
  type = '机房空调'
  console.log('type~~', type+'_setup')
}
// 2、定义方法（vue2在methods中）
function changecomputerTemp() {
  computerTemp += 2
  console.log('computerTemp~~', computerTemp)
}
</script>
</script>