提示:Vue3.2 版本开始才能使用语法糖!
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无需 return,template 便可直接使用。相比于普通的
TypeScript 声明 props 和抛出事件。要使用这个语法,需要将 setup attribute 添加到 代码块上:
<script setup>
console.log('hello script setup')
script>
里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同, 中的代码会在每次组件实例被创建的时候执行。
新增加一个script标签,在这个标签中写入name属性,代码如下:
<template>
<button>demobutton>
template>
<script>
export default {
name: "VButton",
};
script>
<script setup>
script>
<style scoped lang="less">
style>
<template>
<div class="home">
<button>+1button>
{{ num }}
div>
template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
script>
<template>
<div class="home">
<button @click="btnClick">+1button>
{{ num }}
div>
template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
const btnClick = () => {
num.value = num.value + 1
}
script>
<script setup>
import { useStore } from '@/store';
const store = useStore();
store.getters.userInfo
script>
接受一个 getter 函数,并根据 getter 的返回值返回一个不可变的响应式 ref 对象。
<script setup>
import { computed, reactive } from 'vue';
import { useStore } from '@/store';
const store = useStore();
const userInfo = computed(() => store.getters.userInfo);
let person = reactive({
firstName:'小',
lastName:'叮当'
})
const fullName = computed(() => {
return person.firstName + '-' + person.lastName
})
script>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
route.query // 获取路由query
route.params // 获取路由params
router.push({ path: '/login', query: {} });
script>
<template>
<MyComponent />
<my-component />
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
<FooBarChild />
<Form.Input>
<Form.Label>labelForm.Label>
Form.Input>
template>
<script setup>
import MyComponent from './MyComponent.vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
// 有命名的 import 导入和组件的推断名冲突了,可以使用 import 别名导入
import { FooBar as FooBarChild } from './components'
// 从单个文件中导入多个组件
import * as Form from './form-components'
script>
<template>
<h1 v-my-directive>This is a Headingh1>
<h1 py-directive>This is a Headingh1>
template>
<script setup>
// 内部定义
const vMyDirective = {
beforeMount: (el) => {
// 在元素上做些操作
}
}
// 外部导入的指令同样能够工作,并且能够通过重命名来使其符合命名规范
import { myDirective as pyDirective } from './MyDirective.js'
script>
<script setup>
const emit = defineEmits(['change', 'delete'])
// setup code
emits('change', 'cancel');
emits('delete');
script>
<script setup>
const props = defineProps({
foo: String,
});
console.log(props.foo);
script>
<script setup>
import { ref, watch, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
const num = ref(0);
// 监听一个数据源
watch(num, (num, prevNum) => {
/* ... */
})
const fooRef = ref(1);
const barRef = ref(2);
// 监听多个数据源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
console.log('fooRef或barRef变了')
})
// 监听路由参数
const route = useRoute();
watch(
() => route.fullPath,
() => {
// code
}
);
script>
立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
<script setup>
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
script>
使用 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 中声明的绑定。
为了在