vue3新特性

--

teleport可以指定元素渲染到某一元素下；

如：

<teleport to="body">
  <div>父级teleport</div>
</teleport>

emits自定义事件

emits: ['inFocus', 'submit'] // 会覆盖原生事件
emits: {
    // 没有验证
    click: null,

    // 验证 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  }

v-module可以绑定多个值

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

自定义v-model修饰符：

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
</div>
app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})

<script setup>语法糖

声明的方法、变量、组件 可以直接在模板中使用；不用显示return出来

动态组件：

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

递归组件、组件别名

例如：名为 FooBar.vue 的组件可以在其模板中用 <FooBar/> 引用它自己。

为了避免组件名和变量冲突，可以使用组件别名

import { FooBar as FooBarChild } from './components'

命名空间组件（引入多个组件时非常方便）：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

使用自定义指令：

这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

<script setup>
  // 导入的指令同样能够工作，并且能够通过重命名来使其符合命名规范
  import { myDirective as vMyDirective } from './MyDirective.js'
</script>

defineProps 和 defineEmits

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

defineExpose

使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

useSlots 和 useAttrs

在 <script setup> 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用

与普通的 <script> 一起使用

...

顶层 await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()：

<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

状态驱动的动态 CSS

单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：

<template>
  <div class="color1">父级teleport</div>
</template>

<script setup>
import { ref } from 'vue'
const theme = ref({
  color: 'red'
})
setInterval(() => {
  if(theme.value.color == 'red') {
    theme.value.color = 'green'
  } else {
    theme.value.color = 'red'
  }
}, 500)
</script>
<style>
.color1{
  color: v-bind('theme.color');
}
</style>

SFC <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

<style scoped>
/* deep selectors */
::v-deep(.foo) {}
/* shorthand */
:deep(.foo) {}

/* targeting slot content */
::v-slotted(.foo) {}
/* shorthand */
:slotted(.foo) {}

/* one-off global rule */
::v-global(.foo) {}
/* shorthand */
:global(.foo) {}
</style>

 .sync修饰符的替换：

<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->

<ChildComponent v-model:title="pageTitle" />

<template v-for> 的key用该设置在template标签上

vue3中的v-if比v-for的优先级高，与vue2相反

v-bind="object" 和一个相同的独立 attribute覆盖可以控制，写在后面的覆盖前面的

 $listeners 被移除或整合到 $attrs

 $attrs 现在包含 class 和 style attribute

 ...

--