vue3组合式api的setup语法糖+defineProps、defineExpose、defineEmits用法说明、markRaw

前言：最近使用vue3发现了setup的语法糖很好用

一、介绍

• vue3 + ts 正常写法

<script lang="ts">
	import { ref } from "vue";
	export default {
		setup(){
			const text= ref('代码')
			const handler = () => {}
			return { text, handler }
		}
	}
</script>

• 加上setup语法糖写法

<script lang="ts" setup>
	import { ref } from "vue";
	const text= ref('代码')
	const handler = () => {}
</script>

可以看出，写了setup语法糖之后，setup中的可以直接暴露给模板；
少了export default和setup()和return等，不需要写一个函数return一次了。

二、defineProps、defineExpose、defineEmits用法说明

1、defineProps

场景：组件通信时，子组件中使用props，接收父组件的参数

// 方法1
const props = defineProps(["width", "height"]);
// 方法2
const props = defineProps({
  width: {
    type: String,
    default: "100px",
  },
  height: {
    type: String,
    default: "",
  },
});
// 方法3
interface defi {
  width: String;
  height: String;
}
const props = defineProps<defi>();
// 方法4 --- 推荐
const props = withDefaults(
  defineProps<{
    width?: string;
    height：string;
  }>(),
  {
    width: '100px', // 默认值，可不写
  }
);
// withDefaults和defineProps不需要引入，可直接使用

2、defineExpose

场景：组件通信时，子组件函数导出可以被父组件调用

defineExpose({});
// defineExpose不需要引入，可直接使用

例如：

const timerHanlde = () => {}
defineExpose({
  timerHanlde,
});

3、defineEmits

场景：组件通信时，子组件调用父组件的方法

const $emit = defineEmits([]); // 数组形式
// defineEmits不需要引入，可直接使用

例如：

const $emit = defineEmits(["change", "finished"]); // 数组形式定义
// 调用
const onChange = (time) =>{
  $emit("change", time);
  $emit("finished");
}

4、markRaw

作用:标记一个对象,使其永远不会再成为响应式对象
应用场景:
1.有些值不应被设置成响应式时,例如复杂的第三方类库等
2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。
例如：在使用echarts时，使用myChart.value.resize()会报错

Uncaught TypeError: Cannot read properties of undefined (reading ‘type’)

需要加上

import { markRaw } from 'vue'
myChart.value = markRaw(echarts.init(document.getElementById('trendEcharts') as HTMLElement))