defineModel #

一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

原因是因为从vue2开始就已经是单向数据流，在子组件中是不能直接修改props中的值。而是应该由子组件中抛出一个事件，由父组件去监听这个事件，然后去修改父组件中传递给props的变量。如果这里我们给input输入框直接加一个v-model="props.modelValue"，那么其实是在子组件内直接修改props中的modelValue。由于单向数据流的原因，vue是不支持直接修改props的，所以我们才需要将代码写成上面的样子。

scoped #

scoped：调整 css 作用域。ref

<style scoped>
</style>

• css 样式只对当前组件有效；
• 父组件的样式将不会渗透到子组件中，但子组件的根元素会受父组件样式影响；
  • 根元素渗透由两个条件产生：
    • 父组件唯一标识符属性 data-v-id 也会被添加到 子组件根元素上；
    • 子组件根元素上具有和父组件同名 class；

影响子组件的根的例子：

<template>
  <el-tree></el-tree>
</template>

<style scoped>
  .el-tree {
    width: 100%;
  }
</style>

• 当父组件没有声明 scoped，子组件声明了 scoped 时
  • 子组件可以不声明样式而直接使用父组件的样式；
  • 子组件也声明了样式，但样式中的属性没有冲突，则父子组件样式可以叠加；
  • 子组件样式与父组件冲突，优先使用子组件样式；
• 当父子组件都没有声明 scoped 时，子组件的样式会被父组件覆盖；
• 用 :deep() 伪类强制样式影响子组件；

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

<a href="https://vue-draggable-plus.pages.dev/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E5%9C%A8%E6%8E%92%E5%BA%8F%E6%97%B6-%E6%9B%B4%E6%96%B0%E9%A1%BA%E5%BA%8F%E9%94%99%E8%AF%AF">为什么我在排序时，更新顺序错误？</a> #

答：请确保在使用 v-for 渲染列表时，绑定的 key 值是唯一的，否则会导致渲染错误。避免使用 index 作为 key 值。

Vue virtual DOM

始终为 v-for 提供 :key，但永远不要使用 index 作为 key 值；缺省状况下，Vue 使用 index 作为 key 值。

• Tips and Gotchas for Using key with v-for in Vue.js 3
• Vue 的 key 值別再綁 index 啦!
• 通过 key 管理状态

moveArrayElement

自定义指令 #

自定义指令

class 中使用变量 #

isActive 为真，active 属性存在；反之 active 属性不存在。ref

<div :class="{ active: isActive }"></div>

onload 和 src 的顺序问题 #

先定义 onload，再赋值 src。ref 官方示例

addEventListener #

once：只回调一次，然后自动移除 listener。

script setup #

https://blog.csdn.net/YZRHANYU/article/details/129617852

常量 #

• 定义常量

// 1
const male = '1'

// 2
const status = {
    todo: '0',
    doing: '1',
    done: '2',
}
status.done // use

• 使用 Symbol(ES6) [[原始数据类型]]
• 使用枚举（TypeScript）

消灭前端项目中的“魔数”

Vue项目常量的使用

watch #

回调的触发时机：默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。

父组件先收到回调 #

• 核心原因：
  • Vue 组件更新顺序：父组件优先于子组件。
  • 依赖收集顺序：父组件优先。
• 结果：
  • 父组件的 watcher 先被触发。

getCurrentInstance() #

内部方法，不推荐使用。ref

Element Plus 文档

TypeScript 手册

Vue3 文档

二次封装 el-input 的正确写法