vue

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更.
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。$nextTick() 返回一个 Promise 对象
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值

watch当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

用 key 管理可复用的元素,在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}

非 Prop 的特性,会被添加到这个组件的根元素上。如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false
从外部提供给组件的值会替换掉组件内部设置好的值,class 和 style 特性的两边的值会被合并起来，从而得到最终的值.
要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符,父级的 .native 监听器静默失败，Vue 提供了一个 listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
  v-bind:title.sync="doc.title"

<slot name="header"></slot>
<template v-slot:header>
    <h1>Here might be a page title</h1>
 </template>

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

v-slot: === # 插槽可解构{} 可动态[]

混入 (mixin),分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。发生冲突时以组件数据优先,同名钩子函数将合并为一个数组,混入对象的钩子将在组件自身钩子之前调用。

自定义指令 Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
或者在组件的directive选项中制定局部指令.
通过全局方法 Vue.use() 使用插件,Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

过滤器filters | filters: {capitalize: function (value) {}},可以串联

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM,组件树中的所有 VNode 必须是唯一的

<transition name="fade"> </transition>
v-enter,v-enter-active,v-enter-to