vue3.2 setup

vue3.2 到底更新了什么？

1.SSR：服务端渲染优化。
2.New SFC Features：新的单文件组件特性。
3.Web Components：自定义 web 组件。
4.Effect Scope API：effect 作用域，用来直接控制响应式副作用的释放时间(computed 和 watchers)。
5.Performance Improvements：性能提升。

一、变量、方法不需要 return 出来

<template>
  <div class="home">
    {{flag }}
    <button @click="changeHander">改变</button>
  </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    const flag=ref("第一次循环")
    const changeHander=()=>{
        flag.value='第二次循环'
    }
</script>

2.组件不需要再注册

<template>
    <div>
        <h2> 你好</h2>
    </div>
</template>

<template>
  <div class="home">
    <testcom></testcom>
  </div>
</template>
<script setup>
import testcom from "../components/testcom .vue"
</script>

3.父子传参 使用互调方法 defineProps defineEmits defineExpose

// 子
<template>
    <div>
        <p>:{{ info}}</p>
        <p>{{ time }}</p>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>
<script  setup>
import {defineProps,defineEmits,defineExpose } from 'vue'
defineProps({
    info:{
        type:String,
        default:''
    },
    time:{
        type:String,
        default:''
    },
})
const info=reactive({
    like:'chan',
    age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
    info.like,
    info.age
})
const emit=defineEmits(['myAdd','myDel'])
const hander1Click=()=>{
    emit('myAdd','新增的数据')
}

const hander2Click=()=>{
    emit('myDel','删除的数据')
}
</script>

// 父
<template>
  <div class="home">
    <testcom  ref="testcomRef  :info="msg" time="132"  @myAdd="myAddHander" @myDel='myDelHander'></testcom >
    <button @click="getSonHander">获取子组件中的数据</button>
  </div>
</template>
<script setup>
import testcom from "../components/testcom .vue"
const msg='132'
const testcomRef = ref()
const myAddHander=(mess)=>{
  console.log('新增==>',mess);
}

const myDelHander=(mess)=>{
  console.log('删除==>', mess);
}
const getSonHander = ()=>{
  console.log('获取子组件中的信息', testcomRef.value.like);
  console.log('获取子组件中的信息', testcomRef.value.age);
}
</script>