526互联

vue中＜script setup＞中使用watch、computed、props等方法

发布时间 2023-05-24 10:15:21作者: ZerlinM

<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>
  • 带默认值的props
export interface Props {
  msg?: string
  labels?: string[]
}

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

defineExpose()

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

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