Vue2.0 总结

1、 vue是什么？

（1） 用于构建用户界面的渐进式框架
（2） Vue的核心库只关注视图层
（3） 易于上手，便于与第三方库结合使用

2、 Vue与其他框架的区别？

React与vue
相同点：
（1） 使用虚拟DOM
（2） 提供相应式和组件化的视图组件
（3） 将注意力集中保持在核心库，其他功能比如路由和全局状态管理交给相关的库
不同点：
（1） react有更丰富的生态系统
（2） 等等

3、 如何创建一个vue实例？

New vue()

4、 Object.freeze() 会阻止现有的响应系统追踪变化

5、 生命周期钩子

每个vue实例被创建到销毁会经历的一系列过程，在这个过程中产生的就是生命钩子函数，也是给用户在不同阶段添加代码的机会
（1） beforeCreate：在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用
（2） created：在实例创建之后立即同步调用。已经完成以下配置（数据侦听、计算属性、方法、事件/侦听器的回调）未开始挂载
（3） beforeMount：在挂载开始之前
（4） mounted：实例挂载后。注意不保证所有子组件都挂载完成，如果要等到整个视图渲染完成在使用

this.$nextTick(()=>{
// 你的操作
})

（5） beforeUpfate：在数据发生变化，DOM被更新之前
（6）updated：在数据更改导致虚拟DOM重新渲染和更新完毕，同理updated也不会保证所有的子组件渲染你完成。
注意：避免在这个期间更改状态，如果要改，可以用计算属性/watcher
（7）activated：被keep-alive缓存的组件激活时调用
（8）deactivated：被keep-alive缓存组件失活时调用
（9）beforeDestoryed：实例销毁之前调用
（10）destroyed：实例被销魂后调用
（11）errorCaptured：在捕获一个来自后代组件的错误时被调用

6、模板语法

1、插值

<span>Message: {{ msg }}</span>

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

//绑定属性
<div v-bind:id="dynamicId"></div>

//使用 JavaScript 表达式
{{ message.split('').reverse().join('') }}
//模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 

2、指令

<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
//动态参数
<a v-bind:[attributeName]="url"> ... </a>
//修饰符
<form v-on:submit.prevent="onSubmit">...</form>

3、缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

7、计算属性和侦听器

为什么用计算属性？避免模板中放入太多的逻辑，比如以下这种

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

声明data的时候，如果在声明一个计算属性，以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的
怎么理解这里说的副作用？
计算属性 vs 方法
计算属性缓存：计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
用函数也可以实现，每当触发重新渲染时，调用方法将总会再次执行函数，性能开销大。

计算属性 vs 侦听属性
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch；
通常更好的做法是使用计算属性而不是命令式的 watch 回调

计算属性的 setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

什么时候用watch？
当需要在数据变化时执行异步或开销较大的操作时。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

8、Class 与 Style 绑定

比较容易

9、条件渲染

用 key 管理可复用的元素

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

如果不使用key，切换loginType === 'username’的时候，是共用一个input的 如果要区分 多加一个key

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

注意，v-show 不支持 元素，也不支持 v-else

10、列表渲染

1、注意v-for 最好与key绑定，而且key 最好是字符串或数值类型的值，为了在渲染的时候快速对上号

数组更新检测

变更办法 ：如果被监听的数组 做了一下变化，视图就会变化
push：末尾添加
unshift：开头添加
pop：末尾删除
shift：开头删除
splice:从第几位开始增加/删除
sort：排序
reverse：对字符串进行反转

替换数组：可以 用一个数组进行fiter()、concat()、slice() 返回的是一个新数组，并且可以用新数组替换旧数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注意：用一个含有相同元素的数组去替换原来的数组是非常高效的操作。不会重新渲染整个DOM。