vue3学习日记二 setup语法糖

1.基本语法

<script setup>
console.log('hello script setup')
</script>

2.顶层的绑定会暴露给模板，即在顶层声明的变量可以直接给tempalte使用

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{
  { msg }}</div>
</template>



//import 导入的方法也可直接在模板中使用，无需在methods中暴露

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{
  { capitalize('hello') }}</div>
</template>

3. 创建响应式数据    最好只是用一种 ref + toRefs,以免代码过于混乱

<script setup>
import { ref,reactive,toRefs,toRef } from 'vue'

const count = ref(0)  //声明基本数据类型

const obj=reactive({  //声明对象
    name:'222',
    age:22
})

const {name,age} =toRefs(obj) //解构对象将对象中的所有值变成响应式数据

const name =toRef(ob