即将去一家 vue 技术栈的公司干活了，其实对于 vue2 的掌握，我还是有不少欠缺的，自己通读 vue2 的文档还是大一的时候，后面 vue2 的版本经历了多次更新，这些更新的内容我基本就没怎么看过了，这次就来查漏补缺一下，这份笔记只记录自己不熟悉的内容。
不同构建版本 这里有几个概念
完整版，同时包含运行时和编译器的版本
编译器，如果需要使用 template 选项，需要使用带编译器的完整版。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：
运行时，除去编译器的一切
UMD，统一模块规范，提供了一个 AMD,CMD,ES Module 的兼容层
CMD，这是 nodejs 的模块化规范，配合老的打包工具如 Browserify 或 webpack 1。
ES Module 从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：
为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过 script type=”module” 直接导入。
CSP 环境 在某些环境，如 Google Chrome Apps，会强制应用内容安全策略 CSP，不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。运行时版本是完全兼容 CSP 的，当通过 webpack + vue-loader 或者 Browserify + vueify 构建时，模板将被预编译为 render 函数，可以在 CSP 环境中完美运行。
Vue 实例 Object.freeze 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。这里 Vue 3 直接提供了一个 api markRaw
v-once 可以执行一次性的插值，当数据改变时，插值处的内容不会更新。
模板中的全局变量 模板中的表达式都被放在沙盒中，只能访问全局变量的一个白名单
1 2 3 4 5 6 const allowedGlobals = makeMap( "Infinity,undefined,NaN,isFinite,isNaN," + "parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent," + "Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl," + "require" );
动态参数 动态参数，2.6.0 新增，可以使用 方括号括起来的 js 表达式作为一个指令的参数
1 2 <a v-bind:[attributeName]="url" > ... </a> <a v-on: [eventName ]="doSomething" > ... </a >
对动态参数值的约束 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
1 2 <!-- 这会触发一个编译警告 --> <a v-bind: ['foo ' + bar ]="value" > ... </a >
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
1 2 3 4 5 <!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` 。 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。 --> <a v-bind: [someAttr ]="value" > ... </a >
计算属性和侦听器 计算属性 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖。
1 2 3 4 5 computed: { now : function ( return Date .now() } }
计算属性的 setter 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 computed: { fullName : { get : function ( return this .firstName + ' ' + this .lastName }, set : function (newValue ) var names = newValue.split(' ' ) this .firstName = names[0 ] this .lastName = names[names.length - 1 ] } } }
侦听器 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var watchExampleVM = new Vue({ el : "#watch-example" , data : { question : "" , answer : "I cannot give you an answer until you ask a question!" , }, watch : { question : function (newQuestion, oldQuestion ) this .answer = "Waiting for you to stop typing..." ; this .debouncedGetAnswer(); }, }, created : function ( this .debouncedGetAnswer = _.debounce(this .getAnswer, 500 ); }, methods : { getAnswer : function ( if (this .question.indexOf("?" ) === -1 ) { this .answer = "Questions usually contain a question mark. ;-)" ; return ; } this .answer = "Thinking..." ; var vm = this ; axios .get("https://yesno.wtf/api" ) .then(function (response ) vm.answer = _.capitalize(response.data.answer); }) .catch(function (error ) vm.answer = "Error! Could not reach the API. " + error; }); }, }, });
class 与 style 绑定 当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
当 v-bind 使用需要添加浏览器引擎前缀的 CSS 属性值时，Vue.js 会自动侦测并添加响应的前缀。
多重值 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
1 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" ></div>
条件渲染 v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染 v-for 中使用对象 你也可以用 v-for 来遍历一个对象的属性。
1 2 3 <div v-for ="(value, name, index) in object" > {{ index }}. {{ name }}: {{ value }} </div>
在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
维护状态 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
数组更新检测 Vue 将被侦听的数组变异方法进行了包裹，所以它们也会触发视图更新，这些方法包括：
1 2 3 4 5 6 7 push(); pop(); shift(); unshift(); splice(); sort(); reverse();
替换数组 filter()、concat() 和 slice()。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。
1 2 3 example1.items = example1.items.filter(function (item ) return item.message.match(/Foo/ ); });
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。
显示过滤/排序后的结果 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
v-for 里使用值范围 v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
1 2 3 <div> <span v-for ="n in 10" > {{ n }} </span > </div>
template 上使用 v-for 类似于 v-if，你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容。比如：
1 2 3 4 5 6 <ul> <template v-for ="item in items" > <li > {{ item.msg }}</li > <li class ="divider" role ="presentation" > </li > </template > </ul>
组件上使用 v-for 在 2.2.0+的版本里，在组件上使用 v-for 时，key 现在是必须的
事件处理 当需要访问原始 DOM 事件时，可以用特殊变量 $event 把它传入方法：
1 2 3 <button v-on:click="warn('Form cannot be submitted yet.', $event)" > Submit </button>
事件修饰符 1 2 3 4 5 6 .stop .prevent .capture .self .once 事件只会触发一次，可以被用到自定义的组建事件上 .passive 对应于 addEventListener 的 passive 属性，表明这个函数不能使用 preventDefault。如果和 .prevent一起使用，浏览器会给予警告
按键修饰符 vue 允许为 v-on 在监听键盘事件时添加修饰符。
直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
1 2 3 4 5 6 7 8 <button v-on:click.ctrl ="onClick" > A</button > <button v-on:click.ctrl.exact ="onCtrlClick" > A</button > <button v-on:click.exact ="onClick" > A</button >
鼠标按钮修饰符
表单输入绑定 v-model 可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上是语法糖，他负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
text 和 textarea 元素使用 value 属性和 input 事件；
在 textarea 处使用插值语法不会生效。
select 单选时，如果 v-model 表达式的初始值未能匹配任何选项，select 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
1 2 3 4 5 6 <select v-model ="selected" > <option disabled value ="" > 请选择</option > <option > A</option > <option > B</option > <option > C</option > </select >
select 多选时，应绑定到一个数组。
修饰符 .lazy 默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后 进行同步。
.number 自动将用户输入转为 number 类型，如果这个值无法被 parseFloat 解析，就会返回原始值。
.trim 自动过滤用户输入的首尾空白字符
在组件上使用 v-model 默认会使用组件的 value 和 input 事件，可以使用 model 属性修改默认行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Vue.component("base-checkbox" , { model : { prop : "checked" , event : "change" , }, props : { checked : Boolean , }, template : ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` ,});
组件基础 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
1 2 3 Vue.component("my-component-name" , { });
动态组件 上述内容可以通过 Vue 的 component 元素加一个特殊的 is attribute 来实现：
1 <component v-bind:is ="currentTabComponent" > </component >
请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。
dom property 和 attribute 的区别 当写 html 代码的时候，你可以在 html 标签上定义 attr，当浏览器解析你的 html 代码的时候，一个相应的 dom 节点会被创建，这个节点是一个对象，因此他具有他自己的属性。对于一个给定的 DOM 节点对象，属性是对象的属性，attributes 是对象的 attributes 属性里的元素。
当一个 DOM 节点被创建，dom 对象的许多 preperty 和 它的 attributes 里面的属性是相关联的
1 <input id ="the-input" type ="text" value ="Name:" />
相应的 dom 节点会有 id，type 和 value 属性
id 属性是 id attribute 的反射，对其进行读写会直接改变 attribute 中的 id 属性。
解析 dom 模板的注意事项 有些 HTML 元素，诸如 ul、ol、table 和 select，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 li、tr 和 option，只能出现在其它某些特定的元素内部。
深入了解组件 prop 类型检查 type 可以是下列原生构造函数中的一个
String
额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。
非 prop 的 attribute 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。这些 attribute 会被添加到这个组件的根元素上。
替换/合并已有的 Attribute 对于大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。class 和 style attribute 会稍微智能一些，即两边的值会被合并起来。
禁用 Attribute 继承 如果不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。
1 2 3 4 { required : true , placeholder : 'Enter your username' }
自定义事件 如果希望监听原生事件，需要使用.native 修饰符。
.sync 语法糖 是以下方式的简写,带有.sync 修饰符的 v-bind 不能和表达式一起使用。
1 2 3 4 <text-document v-bind:title ="doc.title" v-on:update:title ="doc.title = $event" > </text-document >
插槽 编译作用域 1 2 3 4 5 6 7 8 <navigation-link url ="/profile" > Clicking here will send you to: {{ url }} </navigation-link >
后备内容 有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 submit-button 组件中：
1 2 3 <button type ="submit" > <slot > Submit</slot > </button >
具名插槽 在向具名插槽提供内容的时候，我们可以在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <base-layout > <template v-slot:header > <h1 > Here might be a page title</h1 > </template > <template v-slot:default > <p > A paragraph for the main content.</p > <p > And another one.</p > </template > <template v-slot:footer > <p > Here's some contact info</p > </template > </base-layout >
注意 v-slot 只能添加在 template 上
作用域插槽 绑定在 slot 元素上的 attribute 被称为插槽 prop。
1 2 3 <span > <slot v-bind:user ="user" > {{ user.lastName }} </slot > </span >
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 slot 元素的一个 attribute 绑定上去：
1 2 3 <span > <slot v-bind:user ="user" > {{ user.lastName }} </slot > </span >
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
1 2 3 <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>
还可以更简单
1 <current-user v-slot ="slotProps" > {{ slotProps.user.firstName }} </current-user >
只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
1 2 3 4 5 6 7 <current-user > <template v-slot:default ="slotProps" > {{ slotProps.user.firstName }} </template > <template v-slot:other ="otherSlotProps" > ... </template > </current-user >
解构插槽 prop 插槽 prop 可以使用解构语法
1 <current-user v-slot ="{ user }" > {{ user.firstName }} </current-user >
可以定义默认值
1 2 3 <current-user v-slot ="{ user = { firstName: 'Guest' } }" > {{ user.firstName }} </current-user >
动态插槽名 和动态属性名一样
具名插槽缩写 使用 #
动态组件 & 异步组件 使用动态组件的时候，有时会向保持这些组件的状态
1 2 3 4 <keep-alive > <component v-bind:is ="currentTabComponent" > </component > </keep-alive >
处理边界情况 程式化的事件侦听器 如此可以避免在实例上添加不必要的属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 mounted: function ( this .attachDatepicker('startDateInput' ) this .attachDatepicker('endDateInput' ) }, methods : { attachDatepicker : function (refName ) var picker = new Pikaday({ field : this .$refs[refName], format : 'YYYY-MM-DD' }) this .$once('hook:beforeDestroy' , function ( picker.destroy() }) } }
递归组件 可以在自己的模板中调用自身，只能通过 name 选项来做这件事
模板定义的替代品 当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。
1 2 3 4 5 6 <my-component inline-template > <div > <p > These are compiled as the component's own template.</p > <p > Not parent's transclusion content.</p > </div > </my-component >
X-Template
另一个定义模板的方式是在一个 script 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：
1 2 3 <script type ="text/x-template" id ="hello-world-template" > <p > Hello hello hello</p > </script >
1 2 3 Vue.component("hello-world" , { template : "#hello-world-template" , });
强制更新 使用 forceUpdate 来做这件事,只有很少的情况下才需要做这件事
过渡
初始渲染的过渡 可以在节点上设置 appear，也可以设置自定义的类名和钩子函数
1 2 3 <transition appear> <!-- ... --> </transition>
过渡模式 默认是旧元素的离开和新元素的进入同时发生，可以设置 mode
in-out 新元素先进性过渡，完成后当前元素过渡离开
多个组件的过渡，使用动态组件 1 2 3 <transition name ="component-fade" mode ="out-in" > <component v-bind:is ="view" > </component > </transition >
