vue3项目核心

组合式api语法糖setup

<script setup lang="ts">
const message = 'this is message'
const handle = () => {
  console.log('点击了')
}
</script>

<template>
  <div @click="handle">
    {{ message }}
  </div>
</template>

<style scoped></style>

使用setup后就不需要用export default来暴露数据  template可以直接访问到

响应式数据 ref和reactive

ref用来创建简单类型数据 reactive用来创建复杂类型数据 如对象等

在template访问数据需要通过.value来访问

计算属性computed 监听属性watch

computed用来处理数据  如对数组进行过滤等操作 不进行dom操作

而watch是对数据变化做出处理 可涉及dom操作

如果想监听复杂类型 需要给watch加上deep：true

如果想监听对象里的一个数据 可以精确监听

watch(
()=>info.value.属性,
()=> 做出的处理
)