vue教程查漏补缺

内容补缺

Object.freeze()冻结对象，对象不可增删改查，也不可修改可读性等属性，同时会冻结对象的原型，是浅冻结

vue自带的实例property与方法它们都有$，和用户自定义的区分

不要在选项property或者回调上使用箭头函数，因为箭头函数没有this，this作为变量会一直向上级词法作用域查找，直到找到位置，经常导致找不到报错

生命周期图必须熟悉

模板语法：允许开发者声明式的将dom绑定底层vue实例数据，所有的模板语法都是合法的html，能够被浏览器执行。
底层实现：vue将模板语法编译成虚拟dom渲染函数，结合相应系统，vue能够智能的计算出最少需要重新渲染多少组件，并把dom的操作减少到最少
也可以不用模板，直接用原始js写渲染函数，用JSX语法

v-html可以动态的渲染html,但尽量少用，避免xss攻击，不要对用户提供的内容使用

对于布尔attribute只要存在就是true，如果布尔类型传的值是null，undefined，false，不会被渲染出来

模板中只支持单个表达式（v-for例外）,模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，例如Math和Date，不可以访问自己定义的全局变量

2.6.0开始一些指令可以接收动态参数，例如v-on:[eventName]，如果eventName值为null，意味着解除绑定，否则任何非字符串类型的值都会触发一个警告（空格，引号无效）,如果复杂表达式可以用计算属性代替，参数避免用大写，因为浏览器会全部转换成小写

计算属性：只要依赖没有改变，多次访问还是会返回之前的计算结果，不会重新计算，因为计算属性是基于响应式依赖进行缓存的。
计算属性只有get，可以自己设置set，运行vm.computedName = ‘xxx’时，set会被调用

侦听器（watch）：计算属性可以满足大部分的需求，不过当数据变化时需要执行异步或者开销大的操作，侦听器更适合

class和style的绑定值可以是数组或者对象
v-bind:style时，vue可以自动侦测并添加相应的浏览器引擎前缀
从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex
注：truthy(真值)不是true

v-if返回真值的时候被渲染，切换的时候组件会被销毁和重建，v-if是惰性的，如果初始渲染条件为假，则什么也不做，直到条件为真时，才开始渲染条件块。v-else-if是2.1.0新增
v-show的元素始终会保留在dom中，v-show不管初始条件是什么，元素总是会被渲染，v-show只是简单的切换元素的css property display，v-show不支持template元素，也不支持v-else
总结：v-if有更高的切换开销，v-show有更高的初始渲染开销，因此，如果需要非常频繁的切换，则使用v-show较好，如果在运行是条件很少改变，则使用v-if更好

v-if跟v-for一起使用时，v-for具有比v-if更高的优先级

vue会复用已有元素，可以设置key值解决复用问题

v-for中的in可以用of替代
v-for也可以遍历对象(第一个参数是键值，第二个参数键名，第三个参数索引)，在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括:push,pop,shift,unshift,splice,sort,reverse，这些方法变更了调用的原始数组
非变更方法：filter,concat,slice，不会变更数组，总是返回一个新的数组，使用时可以用新数组替换旧数组
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for可以用在template上，不推荐在同一元素上使用v-for和v-if，当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
 Submit
</button>

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以我们可以用修饰符处理

事件修饰符：

><!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次,2.1.4 新增 -->
<!--不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上-->
<a v-on:click.once="doThis"></a>
><!--2.3.0新增，对应addEventListener中的passive选项提供了.passive修饰符-->
<!--这个 .passive 修饰符尤其能够提升移动端的性能-->
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符：
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。-->
<input v-on:keyup.page-down="onPageDown">
<!--keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。-->
<!--使用 keyCode attribute 也是允许的-->
<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：.enter,.tab,.delete(删除和退格键),.esc,.space,.up,.down,.left,.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

系统修饰符：
2.1.0新增，可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器:.ctrl,.alt,.shift,.meta(mac上meta对应command,windows对应图标键)

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17

.exact修饰符2.5.0新增
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符,2.2.0新增，包括：.left,.right,.middle，这些修饰符会限制处理函数仅响应特定的鼠标按钮

v-on违背了关注点分离的传统，但因为所有的vue.js事件处理方法和表达式都严格的绑定在当前视图的viewModel上，它不会导致任何维护上的困难，好处：
1：扫一眼html模板便能轻松定位js代码里对应的方法
2：无须在js里手动绑定事件，viewModel代码可以是非常纯粹的逻辑，和dom解耦，易于测试
3：当一个viewModel被销毁时，所有的事件处理器都会被自动删除，无须担心如何清理它们

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
在文本区域插值

(<textarea>{{text}}</textarea>)

并不会生效，应用 v-model 来代替。
如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐提供一个值为空的禁用选项。
.lazy，默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，添加lazy修饰符后，转为在change事件后进行同步
.number，将输入值的类型转为数值
.trim，自动过滤用户输入的首尾空白

每用一次组件，就会有一个它的新实例被创建，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，Vue.component全局注册
父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括
    已注册组件的名字，或
     一个组件的选项对象
is:请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。

组件名：kebab-case或者 PascalCase
局部注册的组件在其子组件中不可用
注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：用在模板中的自定义元素的名称，包含了这个组件选项的变量名

使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
注：require.context：一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop,可以赋值一个data，或者用计算属性
JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

props验证：
1.基础类型，null和undefined会通过任何类型验证，可多个类型，例如：propB: [String, Number]
  type可以是：String，Number,Boolean,Array,Object,Date,Function,Symbol
  也可以是一个自定义构造函数，并且通过instanceof来进行验证，例如：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

props: {
    author: Person
  }

验证 author prop 的值是否是通过 new Person 创建的

2.必填：required

3.默认值：default,有默认值的对象或数组，默认值必须从一个工厂函数获取

propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    }

4.自定义验证函数:

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

验证失败会产生一个控制台警告
prop会在组件实例创建之前进行验证，所有实例property（如data、computed等）在default或validator函数中是不可用的

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute
因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上,如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false,
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些 attribute 会被赋予哪个元素

对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。inheritAttrs: false 选项不会影响 style 和 class 的绑定

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称,事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到,因此最好始终使用 kebab-case 的事件名

自定义组件的v-model，2.2.0+新增，组件上的v-model默认会利用value的prop和名为input的事件，
但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

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)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新,你仍然需要在组件的 props 选项里声明 checked 这个 prop。

v-on的.native可以直接监听根元素上的原生事件
vue提供了一个$listeners property,是一个对象，里面包含了作用在组件上的所有监听器

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({}
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

现在 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用 .native 监听器

.sync修饰符，2.3.0+新增，双向绑定，update:myPropName模式触发事件，
.sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute，在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中,在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，例如

<template v-slot:header>
......
</template>

注意 v-slot 只能添加在 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
如果没有slot插槽，则组件开闭标签之前的任何东西都会被忽视
插槽可以设置默认内容
一个不带 name 的 出口会带有隐含的名字“default”

插槽子组件传值到父组件
子组件

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父组件

<!--也可以v-slot="slotProps"，但此种写法不可以和具名插槽混用-->
<!--只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法-->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps

插槽解构赋值prop

动态插槽名，2.6.0新增

<template v-slot:[dynamicSlotName]>
 ...
</template>

具名插槽的缩写，例如 v-slot:header 可以被重写为 #header
和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：#="{ user }"

!!!插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的

异步组件

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

$root,$parent,$refs,provide,inject

inline-template

$forceUpdate

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来

混入也可以进行全局注册Vue.mixin
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数

$slots和children区别

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件

vue插件应该暴露install方法

vue过滤器

不论使用模板还是渲染函数，内容都会被自动转义,动态 attribute 绑定也会自动被转义

由于 Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property,否则Vue 将警告你渲染函数正在试图访问不存在的property。
这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式 property，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

Vue 在更新 DOM 时是异步执行