高效学习：Vue

一、基本使用

指令、插值

• 插值、表达式
• 指令、动态属性
• v-html：会有XSS风险，会覆盖子组件

computed、watch

• computed有缓存，data不变就不会重新计算
• watch如何进行深度监听？watch监听引用类型，拿不到oldVal

条件渲染

• v-if和v-show的区别和使用场景

循环列表渲染

事件

• event参数，自定义参数
• 事件修饰符，按键修饰符

父子组件如何通讯

• props和$emit
• 组件间通讯 - 自定义事件
• 组件生命周期

v-bind:disabled="isButtonDisabled" / v-bind:href="url"
v-if="seen"
v-on:click="doSomething"

自定义事件进行vue组件通讯

• 调用父组件：$emit
• 调用自定义事件：event.$on（mounted里注册）、event.$emit、event.$off（在beforeDestroy里及时销毁，否则造成内存泄露）

生命周期

• 挂载阶段：父组件先进行创建，子组件先进行渲染，子组件渲染完后父组件再渲染（父created、子created、子mounted、父mounted）
• 更新阶段
• 销毁阶段

二、Vue高级特性

• 自定义v-model
• $nextTick

• slot

1. 基本使用
2. 作用域插槽
3. 具名插槽

• 动态组件

• 异步组件

1. import()函数
2. 按需加载，异步加载大组件

• keep-alive

1. 缓存组件
2. 频繁切换，不需要重复渲染
3. vue常见性能优化

• mixin

1. 多个组件有相同的逻辑，抽离出来

优势：

问题：

• Vuex

三、Vue-router

• 路由模式（hash、H5 history）

• 路由配置（动态路由、懒加载）

v-bind:href="url"  
<!-- 缩写 -->
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

v-bind:class="{ active: isActive, 'text-danger': hasError }"

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

也可以用of替代
<div v-for="item of items"></div>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

computed
watched

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。
this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

Vue可以监测到数组变化的，数组原生方法:

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()