一、 基础概念

1. v-for

loop数组 names: =[‘a’, ‘b’, ‘c’]
v-for = “let name in names”>
v-for = “let (name, index) in names”> ,
loop对象 info = {}
v-for = “let (value, key, index) in info”> ,
:key 绑定具有唯一性的key 可以更高效的更新virtual dom
可以发生响应式渲染DOM的数组方法：
push()
pop()
shift()头部删除;
unshift()
splice()的参数为(index, deletedcount?, …items?);
reserve()
sort()

2.

{{item | findName}}
options里 filters ： {这里直接写filter function 例如 findName() {blablabla return XXX;}}

3. v-model表单绑定

v-model=”username”。
v-model其实是 v-on监听input事件 和 v-bind绑定value属性值的语法糖

4. 动态绑定属性

v-bind:src
语法糖 :src

5. 数组的高阶函数

一、filter()
二、map()
三、reduce(callback(previousValue,value), initialValue)
tips: initialValue 是可选值，若不存在，则遍历将从数组的第二个元素(index == 1)开始，第一个元素为previousValue,第二个元素为value

6. input type=”radio”

互斥的效果： name值相同或绑定同一个value

7. input type=”checkbox”

单选时v-model绑定boolean 多选时v-model绑定array

8.

<select v-model="fruits" multiple><option value="apple"> => fruits=[];
<select v-model="fruit><opption> => fruit=”apple”

9.修饰符

lazy修饰符：在input中，v-model.lazy 意味着失焦或回车时，才会绑定值 而不是实时绑定
number修饰符：在input中v-model.number 否则界面输入的数字会被默认转换为string
trim修饰符：在input中v-model.trim 去除首尾空格

二、virtual DOM

什么是虚拟DOM

它是一层对真实DOM的抽象
在JS对象中，虚拟DOM 表现为一个 Object对象。
用对象的属性来描述节点，最终可以通过一系列操作，使它映射到真实环境上。
虚拟DOM对象至少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性
创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，
所以虚拟DOM对象的属性与真实DOM节点一一对应

为什么要用虚拟DOM

操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿
如果直接渲染到真实dom上会引起整个dom树的重绘和重排
使用虚拟DOM，只更新我们修改的那一小块dom
比如：
用传统的原生api或jQuery去操作DOM时，需要更新10个DOM节点，
浏览器收到第一个更新DOM请求后，马上执行流程，最终执行10次流程
而通过VNode，同样更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算

如何实现虚拟DOM

1. 创建一个虚拟DOM元素的类，用来描述DOM
   构造函数至少应该传入(type, props, children),比如类名是 Element

2. 创建虚拟DOM，返回虚拟节点(object)
   通过定义方法createElement(type,props,children)，
   在方法内 return new Element（type,props,children）

tips 参数分析
type: 指定元素的标签类型，如’li’, ‘div’, ‘a’等
props: 表示指定元素身上的属性，如class, style, 自定义属性等
children: 表示指定元素是否有子节点，参数以数组的形式传入

3. 渲染虚拟DOM
   定义render() 方法， 旨在 将虚拟DOM渲染成 真实DOM

• 通过 type 利用document.createElement 创建节点
• 再去遍历props属性对象，然后给创建的元素el设置属性
• 遍历子节点, 如果是虚拟DOM，就继续递归渲染；若不是 就代表是文本节点，直接创建。
  通过 el.appendChild(child) 添加到对应元素内

diff算法

vdom因为是纯粹的JS对象，所以操作它会很高效，
但是vdom的变更最终会转换成DOM操作，为了实现高效的DOM操作，vue 采用diff 算法。

DOM-diff是，给定任意两棵树，在同层级进行比较，找到最少的转换步骤
比较两个虚拟DOM的区别，也就是在比较两个对象的区别。
根据两个虚拟对象创建出补丁，这个补丁里面描述了改变的内容，将这个补丁用来更新DOM。

概括dom更新方式

用JS对象模拟DOM（虚拟DOM）
把此虚拟DOM转成真实DOM并插入页面中（render）
如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）
把差异对象应用到真正的DOM树上（patch）