如果你想在 HTML 的 DOM 元素里直接书写 Vue 模板（Vue 从 DOM 中获取模板字符串），由于浏览器的原生 HTML 解析行为限制，有一些需要注意的事项

• 闭合标签：HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是 <input> 和 <img>，所以必须显式地写出关闭标签，即 <my-component></my-component>（而不能是 <my-component/>）
• 区分大小写：HTML 标签和属性名称是不分大小写的（浏览器会把任何大写的字符解释为小写），所以一些名称要转换为相应等价的 kebab-case (短横线连字符) 形式
  • 如果组件名称采用 PascalCase 形式，如 <MyComponent />，则在使用组件时需要采用的名称是 <my-component></my-component>
  • 如果 prop 名称采用 camelCase 形式，如 postTitle，则在使用组件时需要设置的 prop 是 <my-component post-title="hello!"></my-component>
  • 如果自定义的事件名称采用 camelCase 形式，如 updatePost，则在使用组件时需要监听的事件名称是 <my-component @update-post="updatePostHandler"></my-component>
• 元素位置的限制：因为对于 <ul>、<ol>、<table> 和 <select> 这些元素，其内部允许放置的直接子元素是有严格限制的，如果嵌入其他元素会被视为无效的内容，而提升到外部，造成最终渲染问题。
  如果我们需要在这些元素中使用组件作为直接子元素，则可以在「合法」的子元素上使用属性 is 来指定渲染的实际内容，这时属性 is 用在原生的 HTML 元素上（如 <tr>），该属性值需要使用 vue: 作为前缀，以表示解析的实际上是一个 Vue 组件
  html

  <table>
    <tr is="vue:blog-post-row"></tr>
  </table>

参数在指令后通过一个冒号 : 隔开，一般是一个字符串，也支持采用 JavaScript 表达式动态生成参数

动态参数需要用方括号 [] 包裹

<template>
  <a v-bind:[attributeName]="url"> ... </a>
  <!-- 简写 -->
  <a :[attributeName]="url"> ... </a>
</template>

动态参数中表达式的值应当是一个字符串，或者是 null（显式移除该绑定），如果表达式的结果是其他非字符串的值会触发警告。

Vue 允许注册自定义指令，主要是为了复用关于 DOM 访问/操作的逻辑。

在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令，在模板中以 v-focus 的形式使用；而在没有使用 <script setup> 的情况下，自定义指令需要通过（组件的配置对象） directives 选项进行局部注册；或通过 app.directive(directiveName, hooks) 进行全局注册

例如自定义了一个名为 directiveName 的指令（作为后缀），然后可以在 Vue 的模板中使用该自定义的指令 <div v-directiveName="value">

例如创建一个自定义指令 vFocus 当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>
<template>
  <input v-focus />
</template>

针对以上场景，使用 Vue 自定指令比使用 HTML 的原生属性 autofocus 更有用，因为它不仅仅可以在页面加载完成后生效，还可以在 Vue 动态插入元素后生效

<script setup>
const vMyDirective = {
  created(el, binding, vnode, prevVnode) {},
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted(el, binding, vnode, prevVnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) {},
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode, prevVnode) {},
  unmounted(el, binding, vnode, prevVnode) {}
}
</script>

<template>
  <div v-color="color"></div>
</template>

// 用一个函数（而不是对象）来定义指令
app.directive('color', (el, binding) => {
  // 该函数会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

const app = Vue.createApp({})
app.directive('directiveName', {
// 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})

<script>
export default {
  // ...
  directives: {
    directiveName: {
      // 设定钩子函数
      mounted: function (el) {}
    }
  }
}
</script>

<template>
  <div v-example:[arg]="value"></div>
</template>

<template>
  <div v-demo="{ color: 'white', text: 'hello!' }"></div>
</template>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

<template>
  <MyComponent v-demo="test" />
</template>

<template>
  <div> <!-- v-demo 指令会被应用在此处 -->
    <span>My component content</span>
  </div>
</template>

当组件返回单个根节点时，非 prop attribute 将自动添加到根节点上，作为其 attribute

<script>
app.component('date-picker', {
  inheritAttrs: false,
  template: `
    <div class="date-picker">
      <input type="datetime-local" v-bind="$attrs" />
    </div>
  `
})
</script>

由于 Vue 3 支持组件有多个根节点，如果组件的模板具有多个根节点，必须使用 $attrs 显式指定非 Prop 的 attribute 绑定到哪个节点上，否则会弹出警告

<script>
// 这将发出警告
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})
// 没有警告，$attrs 被传递到 <main> 元素
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})
</script>

<div id="app">
  <my-component class="baz"></my-component>
</div>

<script>
// 将 class 属性绑定到第一个根节点
app.component('custom-layout', {
  template:`
    <div :class="$attrs.class">Hello</div>
    <div>World</div>
  `
})
</script>

Vue 提供了一些修饰符，方便地对表单输入值进行设置：

• number 修饰符：如果希望绑定的动态数据变量获得的是数值类型，可以使用该表单修饰符（表单的值默认是字符串类型）
  tipbox

  如果该值无法被 `parseFloat()` 处理，那么将返回原始值
  `number` 修饰符会在输入框有 `type="number"` 时自动启用

• trim 修饰符：表单修饰符 v-model.trim 自动过滤用户输入的首尾空白字符
• lazy 修饰符：表单修饰符 v-model.lazy 在 change 事件之后（即表单的输入框失去焦点后）进行数据更新同步（而默认是在 input 事件触发后，如果用户使用的是 IME，则拼字阶段的状态是例外的）

<input type="text" v-model.trim.number="content" />

对于单选按钮 <input type="radio" />、复选框 <input type="checkbox"> 以及选择框 <select>，有时候希望这些表单的最终值是另设的，这样可以根据双向绑定的值变动，再设置相应的真实的表单值（甚至可以将对象这一类复杂的数据结构作为表单值）

• 复选框：可以使用 true-value 和 false-value 属性
  html

  <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

  js

  // when checked:
  vm.toggle === 'yes'
  // when unchecked:
  vm.toggle === 'no'

• 单选框：可以绑定 value 属性
  html

  <input type="radio" v-model="pick" v-bind:value="a" />

  js

  // 当选中时
  vm.pick === vm.a

• 选择框选项：绑定 <option> 元素的 value 属性（本来是以选中的 <option> 元素的内容 innerText 作为该表单的值）
  html

  <select v-model="selected">
    <!-- 内联对象字面量 -->
    <option :value="{ number: 123 }">123</option>
  </select>

  js

  // 当被选中时
  typeof vm.selected // => 'object'
  vm.selected.number // => 123

在使用自定义的输入型组件时，Vue 为它们进行优化，也支持使用 v-model 实现双向绑定。

<custom-input v-model="searchText"></custom-input>
<!-- 等价于以下代码 -->
<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

在使用该组件时（在外部，在组件的标签上）：通过指令 v-model 双向绑定需要同步的变量，它的数据默认作为一个名为 modelValue 的 prop 传递到组件内（因此需要在组件内部的 props 里声明 modelValue，并将其绑定到内部的表单元素的 value 属性上）

在这些组件的内部需要进行相应的处理：

• 在组件内使用指令 v-bind 将表单元素的 value 属性绑定到以上声明的 prop modelValue 上，即 v-bind:value="modelValue"（这样就可以将外部传进来的值作为表单的值，实现与外部数据的「同步」）
• 在组件内使用指令 v-on 监听表单元素 input 输入事件，并通过抛出 update:modelValue 事件 $emit('update:modelValue', $event.target.value) 向外传递相应的数据（如果表单是 checkbox 应该传递的数据是 $event.target.checked）

然后外部就会接收抛出的事件，并对指令 v-model 绑定的变量（基于抛出的数据）进行改变（即数据的修改操作还是在父层完成）

// component
app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

<custom-input v-model="searchText"></custom-input>

在组件内，默认传递的 prop 变量是 modelValue，默认监听抛出的事件是 update:modelValue，这种方法更通用，对于 type="text" 或 type="checkbox" 其语义都不会混淆。

如果需要修改 modelValue 这个默认值，在 Vue 2 中可以通过选项 model 进行配置，但在 Vue 3 中 model 选项已移除，作为替代可以在父级中为 v-model 添加参数，这个参数 argument 就是组件内的 prop 变量名和需要监听的事件名（加上 update: 前缀）

<!-- 使用组件 -->
<my-component v-model:title="bookTitle"></my-component>
<!-- 是以下的简写 -->
<my-component :title="bookTitle" @update:title="bookTitle = $event" />

// 组件
app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})

在 Vue 3 中利用特定的 prop（通过指令 v-model 的参数来设置）和抛出相应事件，可以在单个组件上创建多个 v-model，从而实现多个 prop 的双向绑定

<!-- 使用组件，实现 first-name 和 last-name 的双向绑定 -->
<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  template: `
    <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">
    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

另外，在输入型组件上使用指令 v-model 时，不仅支持 Vue 内置的修饰符 .trim、.number、.lazy，Vue 3 还支持添加自定义的修饰符，添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。

<!-- 使用自定义修饰符，实现字符串首字母大写 -->
<my-component v-model.capitalize="myText"></my-component>

// 组件
app.component('my-component', {
  props: {
    modelValue: String,
    // modelModifiers prop 这里我们提供了初始值
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    // 表单 input 事件的处理函数
    emitValue(e) {
      let value = e.target.value
      // 如果 v-model 有修饰符 capitalize 就对表单输入值实现首字母大写
      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">`,
  created() {
    // 当组件的 created 生命周期钩子触发时，会根据调用组件的情况对 modelModifiers prop 进行设置
    // 由于这个例子中 v-model 的修饰符为 capitalize，因此 modelModifiers 对象会包含 capitalize 属性
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

<my-component v-model:description.capitalize="myText"></my-component>

app.component('my-component', {
  props: ['description', 'descriptionModifiers'],
  emits: ['update:description'],
  template: `
    <input type="text"
      :value="description"
      @input="$emit('update:description', $event.target.value)">
  `,
  created() {
    console.log(this.descriptionModifiers) // { capitalize: true }
  }
})

在模板标签中使用指令 v-if 控制 DOM 的渲染，只有条件指令的值为 true 时才渲染元素，否则 DOM 被移除（或不进行初始化渲染生成）。

还可以使用 v-if、v-else-if、v-else 设置同级并列元素的条件渲染，这三个指令的元素需要连续且同级。

在模板标签中使用指令 v-show 也是控制 DOM 的渲染，只有条件指令的值为 true 时才显示元素，否则 DOM 被隐藏。

计算属性常常是为了将复杂和需要重复使用的资料处理逻辑，从模板中的函数表达式提出来。它类似 data 的属性一样，作为响应式数据在模板上直接使用。

如果希望计算属性实时更新，那么它需要有响应式依赖（基于 data 或其他来源的响应式数据），并且返回一个值。

计算属性的最大优势是对于响应式依赖有缓存的，即计算属性只在相关响应式依赖发生改变时它们才会重新求值。

可以将 watch 看作是更通用的响应数据侦听方式。

watch 也是依赖响应式数据的，可以是 data property 或 computed property（也可以是这些 property 的嵌套 property），然后在响应式数据发生变化时触发回调函数，在回调中可以执行异步操作，可以设置中间状态，而且不必返回值。

使用选项式 API 创建侦听器除了以函数形式（函数名就是需要侦听的响应式变量）以外，还可以是对象的形式，对侦听器进行更详细的设置

watch: {
  // 函数形式，侦听响应式变量 a
  a(val, oldVal) {
    console.log(`new: ${val}, old: ${oldVal}`)
  },
  // 回调函数以函数名来表示（字符串）
  b: 'someMethod',
  // 对象形式
  // 配置了 deep 为 true
  // 该回调会在被侦听的对象 c 的任何 property 改变时被调用，不论其被嵌套多深
  c: {
    handler(val, oldVal) {
      console.log('c changed')
    },
    deep: true
  },
  // 侦听对象 c 的属性 d（嵌套属性）
  'c.d': function (val, oldVal) {
  // do something
  },
  // 该回调函数将会在侦听开始之后被立即调用一次
  e: {
    handler(val, oldVal) {
      console.log('e changed')
    },
    immediate: true
  },
  // 多个回调函数构成的数组，当响应式变量 f 发生变动时，这些回调函数会被逐一调用
  f: [
    'handle1',
    function handle2(val, oldVal) {
      console.log('handle2 triggered')
    },
    {
      handler: function handle3(val, oldVal) {
        console.log('handle3 triggered')
      }
    }
  ]
}

const obj = reactive({ count: 0 })
// ⚠️ 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

const obj = reactive({ count: 0 })
watch(obj, (newValue, oldValue) => {
  // ⚠️ 注意传入的参数 `newValue` 和 `oldValue` 是相等的
  // 因为它们引用的是同一个对象
})

watch(
  () => state.someObject,
  () => {
    // 仅当 state.someObject 被替换时触发
  }
)

// 侦听多个源 [fooRef, barRef]
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

Vue 提供了多种事件修饰符，用于更方便地对事件的行为进行设置，这样事件处理函数就可以只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。事件修饰符可以链式调用多个。

• .stop 阻止事件继续传播
• .prevent 阻止事件的默认行为，例如表单提交后跳转到指定网址
• .self 当事件在该元素自身触发时才执行事件处理函数
• .once 只对事件进行一次响应后失效
• .capture 使用事件捕获模式
• .passive 一把针对移动端 scroll 事件进行优化，提高性能（滚动事件将立即发生而非等待 onScroll 完成）
  注意

  但不要把 .passive 和 .prevent 一起使用 .prevent 将会被忽略，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。

  同时使用浏览器可能会向你展示一个警告

• 一系列的鼠标和按键修饰符：UI 用户界面的交互事件十分常见，如鼠标事件、按键事件等，Vue 提供了相应的鼠标和按键修饰符，例如可以直接将键盘事件对象 KeyboardEvent.key 所暴露的任意有效按键名转换为 kebab-case 来作为修饰符，这样就可以针对特定的按键设置响应函数
  html

  <!-- 处理函数只会在 $event.key 等于 'PageDown' 时被调用 -->
  <input @keyup.page-down="onPageDown" />

  注意

  在 Vue 3 中不再支持使用数字 (即键码) 作为 v-on 修饰符

在父子组件中间监听抛出的事件时，子组件在模板中使用 $emit() 方法抛出事件，第一个参数是事件名称，第二参数（可选）是需要传递的数据

<button @click="$emit('enlargeText', 0.1)">Enlarge text</button>

<!-- 使用 $event 访问子组件的点击事件，然后作为自定义事件 enlargeText 的参数抛出，让父组件可以接收 -->
<button @click="$emit('enlargeText', $event)">
  Enlarge text
</button>

然后在父组件中监听这个事件，其回调函数会将子组件所抛出的数据作为第一个参数

<template>
  <blog-post @enlarge-text="onEnlargeText"></blog-post>
</template>
<script>
  // ...
  methods: {
    onEnlargeText(enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }
</script>

<blog-post @enlarge-text="postFontSize += $event"></blog-post>

Vue 3 新增了一个 emits 选项（其作用和选项 props 作用类似），用来定义子组件可以向其父组件触发的事件类型

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

该选项可以接受字符串作为元素的数组，也可以接收一个对象（可以为事件设置验证器，和 props 定义里的验证器类似）。

在对象语法中，每个 property 的值可以为 null 或验证函数，该函数将接收调用 $emit 时传递的数据。验证函数应返回布尔值，以表示事件参数是否有效。

<script>
  const app = createApp({})
  // 数组语法
  app.component('todo-item', {
    emits: ['check'],
    created() {
      this.$emit('check')
    }
  })
  // 对象语法
  app.component('reply-form', {
    emits: {
      // 没有验证函数
      click: null,
      // 带有验证函数
      submit: payload => {
        if (payload.email && payload.password) {
          return true
        } else {
          console.warn(`Invalid submit event payload!`)
          return false
        }
      }
    }
  })
</script>