几分钟掌握vue3 基础的语法糖

前言：

起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用；
Vue3.2 中只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。

ref的使用以及组件的引入

父组件引入子组件时，会自动注册，不在需要使用components 进行注册

// 子组件中 有属性 ：name 和 方法  onSave()
<child ref='childRef' />
<script setup>
  import { ref } from 'vue';
  import child from './child.vue';
  // 获取 ref  需要通过 InstanceType 获取实例类型 ts 情况下
  const childRef = ref<InstanceType <typeop child>>();
  // js情况下
  const childRef = ref(null);
  // 使用子组件的属性以及方法
  childRef.value?.name;
  childRef.value?.onSave();
</script>

// 子组件
// 在语法糖中如果想调用子组件中的 name属性以及 方法 onSave() 需要使用 
 defineExpose 进行暴露
<script setup>
  import { defineExpose,ref }  from ‘vue’;
  let name = ref('huai');
  const onSave = ()=>{
    console.log('huai')
  }
  // 使用 defineExpose 包裹导出
  defineExpose({
    name,
    onSave
  })
</script>

在 v-for 中获取通过ref获取子组件的实例

需要分循环体是固定，还是动态

1. 循环体是固定的，不会改变的

不能使用该方法去操作动态的循环体，不然会出现子实例重复的问题

  <div v-for="item in 10" :key="item">
    <child :ref='childRefs'/>
  </div

<script setup>
  // 子组件实例数组
  const childRefList = ref([])
  // 通过 childRefs 方法向 childRefList 添加子组件实例
  const childRefs = (el) => {
    childRefList.value.push(el)
  }
</script>

2.循环体是动态的

<div v-for="(item, i) in childList" :key="item">
    <child :ref='(el) => childRefs[i] = el'/>
 </div>
<script setup>
  // childList 是动态添加，或者删除
 const childNums = ref(1)
  // 子组件实例数组
  const childRefs = ref([])
</script>

props

3.0版本下使用

<script>
  export default defineComponent({
    props:{
      name:{
        type:String,
        default:'huai'
      }
    },
    setup(props,content){
      // 使用props
      props.name
    }
  })
</script>

3.2.0版本下使用

// 使用 defineProps 可以直接使用
<div>{{name}}</div>
<script setup>
import {defineProps} from 'vue';
defindProps({
  name:{
    type:String,
    default:'huai'
  }
})
</script>

emit的使用

1.3.0 中使用emit

<script>
  emits:['updataName'],
  setup(props,{emit}){
    const onSave = ()=> emit('updataName','huaiyaya');
    return {
      onSave
  }
}
</script>

2.语法糖中使用emit

<script setup>
  import { defineEmits} from ‘vue’
  const emit = defineEmits(['updateName']);
  onSave = ()=>{
    emit('updateName',‘huaiyaya’)
  }
</script>

v-model 与 emit 配合使用

vue3 中支持绑定多个v-model，v-model 是 v-model:modelValue 的简写，同时也可以支持绑定其他字段，如： v-model:age

// 父组件
<child v-model='state.name' v-model:age='state.age'>
<script setup>
  import {reactive,watchEffect} from 'vue';
  let state = reactive({name:'huai',age:18});
  watchEffect(()=>state.name,(nVal,oVale)=>{
      // 输出 huaiyaya
      console.log(nVale)
  },
  {
      deep:true
}
)
</script>

// 子组件
<script setup>
  import {defineProps,defineEmits} from 'vue'
  // modelValue 对应的是v-model
  defineProps(['modelValue','age']);

  const emit = defineEmits(['update:modelValue', 'update:age']);
  // 触发更新值，父组件中绑定的值也会被更新
  const onUpdate = ()=>{
    emit('update:modelValue','huaiyaya');
    emit('update:age',19);
  }  
</script>

v-bind css 的绑定

<script setup>
  import { ref ,defineProps} from 'vue';
  defineProps(['color'])
  let border = ref("border:1px solid");
</script>
<style lang="scss" scoped>
  span {
    // 使用常量接收的样式
    border: v-bind('border');
    // 使用props接收的样式
    color:v-bind('props.color');
  }

await

在语法糖中不在需要使用 asyac 只需要在模版顶部使用<Suspense></Suspense>进行套用

<Suspense>
  <div></div>
</Suspense>
<script setup>
    const post = await getInfo('/info').then(() => {})
</script>