Vue3 实用特性总结

1、Teleport

可以控制在DOM中哪个节点下渲染。

//创建一个组件
app.component('modal', {
  template: `
		<div>
			//指定teleport在body标签下渲染
			    <teleport to="body">
			      <div v-if="modalOpen" class="modal">
			        <div>
			          I'm a teleported  in body! 
			        </div>
			      </div>
			    </teleport>
		</div>

  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

prop有两个：
1、to：string类型，可以是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)
2、disabled：boolean类型，可以禁用teleport功能，禁用以后将在父元素中渲染

2、Fragments

组件可以包含多个根节点！但是，必须显式定义 attribute 对应哪个节点。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

3、触发组件选项

1、emit

//在父组件中
<my-component @my-event="doSomething"></my-component>
//子组件中，触发
this.$emit('myEvent')

2、声明事件：
触发的事件可以以两种形式声明：
1）使用字符串数组的简单形式

export default {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
}

2）使用对象的完整形式，其中每个属性键是事件的名称，值是null或者是验证器函数。

export default {
  emits: {
    // 不进行任何验证
    click: null,

    // 提交验证
    //要添加验证，需要为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`无效的提交参数!`)
        return false
      }
    }
  }
}

emits选项会影响组件接收的哪些事件侦听器被视为组件事件侦听器与原生 DOM 事件侦听器。当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。

4、SFC状态驱动的CSS变量

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

也可以支持JavaScript 表达式 (需要用引号包裹起来)

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

5、SFC

1、>>>和/deep/支持已被弃用。vue3中接受另一个选择器作为参数的伪元素：

::v-deep(.bar) {}

2、
在v2中，从父级传入的插槽内容受父级范围样式和子级范围样式的影响。在 v3 中，子级范围样式默认不影响插槽内容。在子级中要显式定位插槽内容，可以使用::v-slotted()（简写：）:slotted()

:: v-slotted ( .foo ) {}

3、新的伪元素::v-global()可用于在

:: v-global ( .foo ) {}

6、组合式API

//Component API 是以函数的形式展示组件属性，所以第一步就是导入我们需要的函数。我们用 reactive 创建响应属性，用 computed 创建计算属性。
import { reactive, computed } from 'vue'

//仅依赖它的参数和 Vue 全局导出的 API，而不是依赖其微妙的 this 上下文
function useCounter() {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2),
  });
  function increment () { count.value++ }

  return {
    state,
    incrememt
  }
}

export default {
  setup () {
  //这里不存在命名空间冲突，可以通过解构任意命名
    const { state, increment } = useCounter()
    return {
      state,
      increment
    }
  }
}

注意：setup函数是组合式API的入口，setup在初始化props之后，beforeCreate之前被调用，所以不能用this，是取不到东西的

组合式API参考https://segmentfault.com/a/1190000023016699

未完待续。。。