Vue个人遗漏点汇总

• vm.$watch的使用：

vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

可以观察变量a，变化的新的值和旧的值是什么？

• 生命周期钩子解释：

每个Vue实例在被创建的时候，都要经历一系列的初始化过程，比如说：需要设置数据监听、模板编译、将实例挂载到Dom结构上，并且在数据变化时，对dom结构进行更新等等！同时这个过程，Vue允许我们运行向生命周期的钩子函数，这样子，开发者可以再不同阶段带来添加自己代码的机会！

• 模板：

官方给出：
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
粗略解释：
也就是说vue在一定层面上，提高了整个js的运行效率！

• 计算属性与方法：

计算属性是基于他们的响应式依赖进行缓存的，只有相应响应式依赖发生变化时，才会重新求值！若响应依赖没有发生变化，会提取上次计算的结果！也就是缓存！而方法的话，每次用到都会执行一次！

• 计算属性与监听：

当需要在数据变化时执行异步或开销较大的操作时，这个监听是最有用的。而设置中间状态，计算属性是无法做到的！

• v-if 注意事项：

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-if,v-else下的标签input的value复用问题：
在input标签内加入key属性就完美解决！！

<input placeholder="Enter your username" key="username-input">

• v-show

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。Display=none

• v-if与v-show

v-if是看条件渲染，v-show是不管是否被渲染，都会保留在dom中，只是display为none的变化；
使用场景：
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件

• 拆行转义字符

var htmlSTring = "<div>\
  This is a string.\
</div>";

或则 tab键上面的~键 （``）

• v-model的深入研究:

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"

• 组件事件名：

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

• event.target.tagName：返回元素标签