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(obj,'name')// 结构对象中的某个值变成响应式数据
</script>

4.使用组件

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>


//动态使用组件
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

5.defineProps和defineEmits

//子组件
<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change'])
// setup code

function onclick(){
    emit('change',arags)
}
</script>


//父组件
<template>
<div @change='onclick' foo='123'></div>
</template>
<script setup>
function onclick(arags){
}
</script>

6.顶层await和Suspense搭配使用

//子组件   在setup顶层使用await 
<script setup>
  let p = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(123);
      }, 3000);
    });

</script>

<template>
{{p}}

</template>




//父组件

<script setup>
import {defineAsyncComponent} from 'vue' //使用defineAsyncComponent异步引入组件
let Hel =defineAsyncComponent(()=>import('./components/Hello.vue'))


</script>

<template>

<Suspense>
<template v-slot:default>//子组件异步处理完时显示
 <Hel></Hel>

</template>
<template v-slot:fallback> //子组件异步没处理完时显示
 <div>加载中</div>

</template>
</Suspense>
</template>

暂时就这么多，仅记录可能经常用到的