【Vue】基本知识点汇总

1. 指令directives
v-html // 绑定html模板 
v-bind // 绑定状态值 简写:
v-on // 绑定事件，简写@ -> 内联事件处理器、方法事件处理器、事件修饰符、按键修饰符
v-for // 列表渲染
v-if v-eles-if v-else // 条件渲染
v-show // 显示或隐藏元素
v-model // 表单输入绑定

2. 响应式状态（状态改变后，触发重新渲染）
ref
reactive
computed 计算属性

3. 侦听器（状态改变后，执行副作用）
watch
watchEffect 比watch简单一些不用手动维护依赖（和react useEffect功能类似）
watchPostEffect DOM更新后执行回调

4. 生命周期钩子函数
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeUnmout unmouted

5. ref属性，引用DOM或组件节点（类似react useRef createRef）

6. 组件注册
6.1 全局注册
app.component(
    '注册的名字',
    {
          // 组件的实现
    }
) // component支持链式调用
6.2 局部注册
局部注册的组件是在使用它的父组件中显示导入，只能该父组件使用。
关系明确，便于tree-shaking

在SFC单文件组件中，import进来直接使用（隐式注册），否则需要在components选项中注册（显式注册）

$event 变量

7. 传递props（单向数据流，props不可在更改）
组件显式声明它接受的 props，Vue才能知道外部传入的哪些是 props，哪些是透传attribute

defineProps(['title'])，或者在props选项中定义 
{ 
    props: ['title']
}

【props校验】

8. 监听事件
父组件定义事件处理函数，传递给子组件，使用$emit触发

defineEmits(['enlarge-text']) // 声明触发的事件（顶层作用域下）
<button @click="$emit('someEvent')">click me</button> // 子组件触发事件

<MyComponent @some-event="callback" /> 父组件监听事件

【事件校验】

9. 透传attributes
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

defineOptions({ // 不继承透传过来的attributes
  inheritAttrs: false
})

透传给子组件的attributes，可以通过$attrs访问。

10. v-model
v-model 可以在组件上使用以实现双向绑定

defineModel() 返回一个ref

9.1 它的 .value 和父组件的 v-model 的值同步；
9.2 当它被子组件变更了，会触发父组件绑定的值一起更新。

10. 插槽 <slot />
知道了怎么传递props attrs emits，下面学习传递html模板

v-slot: header // 缩写 #header

<slot name="header"></slot>

子组件
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

父组件（接收插槽返回的slotProps）
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

11. 依赖注入（解决逐层传递props）
provide/inject（类似于react context）

12. 异步组件
defineAsyncComponent（类似于react 的lazy懒加载）

<Suspense>

13. 组合式API（类似于react自定义hooks）

14. 自定义指令

15. 插件