Vue2.x文档细读（基础篇）

一本好书就是一个好老师

Vue官方提供的文档非常详细，我觉得有必要啃一啃，写一些自己的心得，减少遇坑，Vue文档里把很多坑都列出来了，写这篇是温习一下我看的基础篇，如果错误，请指正

Vue官方文档

Vue的特性：

核心特性

• 不用触碰DOM，所有操作DOM的都由VUE完成，我们只关注逻辑层即可（例：在methods中修改data）
• 一个组件其实就是一个VUE实例，一个组件本质上是一个拥有预定义选项的一个 Vue 实例（子单元通过 prop 接口与父单元进行了良好的解耦,组件和Vue实例的不同后文提到）
• 组件特性：slot,is(所有支持的浏览器 (IE9 及更高版本) 之下表现一致),Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。（Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。）

其他特性

• 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中（添加新属性将不被监听或者加上Object.freeze(obj)）

• 钩子函数(不要在选项属性或回调上使用箭头函数)

• 所有 Vue.js 的模板都是合法的 HTML

• Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快(diff算法)

• 可以在（HTML和 {{ }} ）模板中能仅写一句JS语句（模板表达式都被放在沙盒中，只能访问全局变量的一个白名单如Math,Date）（个人理解：模板表达式就是整个Vue实例，全局变量是定义在script标签里但不再Vue实例里的）

• v-bind 指令可以用于响应式地更新 HTML 特性（v-for中的:src就是这个原理）（个人感觉bind就是绑定了一个this，然后加了个监听（以后阅读Vue揭秘才能说确定））

• 在HTML模板中 v-bind:[动态参数]动态参数动态参数预期会求出一个字符串，
  异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。
  任何其它非字符串类型的值都将会触发一个警告。
  在 DOM 中使用模板时你需要回避大写键名！
  动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的
  解决办法：变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

• 计算属性：所以，对于任何复杂逻辑，你都应当使用计算属性。你可以像绑定普通属性一样在模板中绑定计算属性，而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。（计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter）
  特征：会缓存在内存中，所以Data().now是不会更新的

• 监听属性：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
  使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。Vue官网实例

• v-bind:class 指令也可以与普通的 class 属性共存，这是一个常用且强大的模式
  当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

• v-show 只是简单地切换元素的 CSS 属性 display。

• 不推荐同时使用 v-if 和 v-for

• 维护状态：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
  如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
  如果用index做Key，相当于默认Key，还是就地更新
  不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

• 数组更新检测，7个变异方法，当使用非变异方法时，可以用新数组替换旧数组：
  所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
  不能检测：当你利用索引直接设置一个数组项时，当你修改数组的长度时
  解决办法：Vue.set(vm.items, indexOfItem, newValue)
  splice(indexOfItem, 1, newValue)
  splice(newLength)

• 对象变更：还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
  解决Vue.set(object, propertyName, value)

• 任何数据都不会被自动传递到组件里

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

• .passive 修饰符尤其能够提升移动端的性能。（立即触发）
  不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
  请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
  并对一些极端场景进行一些特殊处理
  你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。
  它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
  它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  select:如果 v-model 表达式的初始值未能匹配任何选项,这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
  修饰符{
  .lazy input事件改为change事件
  .number
  .trim
  }
  难点：在组件上使用 v-model $event

• 组件的复用： data必须是一个函数，全局注册和局部注册，使用 v-bind 来动态传递 prop
  父级组件可以像处理 native DOM（本地dom） 事件一样通过 v-on 监听子组件实例的任意事件：KaTeX parse error: Expected '}', got 'EOF' at end of input: … @click="emit(‘samefuncname’),可选参数"
  }
  $event

• is特性的作用:解决HTML有些 HTML 元素（诸如 ul、ol、table 和 select），对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 li、tr 和 option，只能出现在其它某些特定的元素内部。
  vue基础基本上就这些东西，下面开是学习深入了解组件！

参考链接Vue官方文档