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))

你可能感兴趣的:(javascript,vue.js,前端)