＜script setup＞使用watch、computed、prophotoshop等方法

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

一些基本用法可以前往Vue3官网查看

props

基本用法：

<script setup>
	const props = defineProps({
	  foo: String
	})
</script>
  //  通过props传过来的是一个静态值，如果需要赋值给双向绑定的数据
  <script setup>
    import { toRefs } from 'vue';
    
	const props = defineProps({
	  foo: String
	})
	beaselineId.value = toRefs(props).foo.value;
</script>

仅限TS下

<script setup>
	const props = defineProps<{
	  foo: string
	  bar?: number
	}>()
	// 这里的类型已经声明，如果没有用?:表示可以省略，则外部必传，否则eslint会报错
</script>

带默认值的props

interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

defineExpose

Vue2：

this.$refs.create.openModal()

Vue3：

// 组件内部
<script lang="ts" setup>
  import { ref } from 'vue';

  const visible = ref<boolean>(false);
  const openModal = () => {
    visible.value = !visible.value;
  };

  defineExpose({ openModal });
</script>

// 外部调用
<create-global ref="createModal" />

<script lang="ts" setup>
  import { ref } from 'vue';
  import CreateGlobal from './create/create-global.vue';
  const createModal = ref();

  const openModal = () => {
    createModal.value.openModal();
  };
</script>

todo

这篇好文章是转载于：学新通技术网