提示

在写这篇博客的时候，我已有半年时间左右没有接触过vue，此前对vue的了解还不够深入，希望通过阅读能够加深我对于vue的理解

新名词

• SFC（单文件组件）顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

知识点

• createApp 可以创建应用实例，应用实例，如 app 的 mount 方法将会把应用挂在在某个容器内（如 '#app'），值得注意的是，挂载返回的是根组件实例，而不是应用实例，使用链式调用时要注意。
• 应用实例会暴露出 config 属性，通过设置 config 属性的 errorHandler，可以捕获所有子组件上的错误。

app.config.errorHanlder = err => {
  // 对应的逻辑
}

• 可以通过 app.component 注册全局组件

app.component('MyComponent', MyComponent)

• createApp允许不止一个应用实例

如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。

• v-html 可以使用双大括号语法将对应的 html 插入到sfc中，但是可能存在 xss 风险

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

• 当希望能够将多个属性绑定在一个组件中时，可以使用 v-bind = obj 语法将对象中的所有属性绑定到组件上。

• vue模版中的表达式是受限的

  • 模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
  • 没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

• 当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写。

• shallowRef 可以放弃深层响应性，可以用来优化性能。

• 与shallowRef对应的，还有 shallowReactive，可以放弃对对象的深层响应性。

• 一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性，如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref，只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

HTML class 绑定的几种方式

• :class="{ active: isActive, 'text-danger': hasError }" 内联对象
• 绑定对象

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div>

• 绑定一个计算属性（常用）

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

• 绑定数组

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

• 希望有条件地渲染某个表达式，可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

• v-if 和 v-for 不建议同时使用，如果 v-if 占据了根元素，应该使用 template 来绑定 v-for

• v-for 中的分隔符可以为 in 也可以为 for

在内联事件处理器中访问事件参数

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

事件修饰符

• @event.stop stopPropagation 停止事件中捕获和冒泡事件的进一步传播
• @event.prevent preventDefault 阻止默认事件的发生，如点击链接跳转