虚拟dom和diff算法

vue2.0加入了virtual dom，有点向react靠拢的意思。vue的diff位于patch.js文件中，复杂度为O(n)。 了解diff过程，我们先从虚拟dom开始。

1. 虚拟dom是什么？

虚拟dom( virtual dom )它是一个Object对象模型，用来模拟真实dom节点的结构。

2. diff算法是什么？

diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
diff算法来源后端
前端将其应用于虚拟dom的diff算法
vue中将 虚拟dom的diff算法放在了 patch.js文件中
使用js来进行两个对象的比较（ vdom 对象模型）
diff算法是同级比较
给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）

3. diff算法运行结束之后，返回什么？

diff算法会返回一个补丁对象patch

4. 虚拟dom的使用基本流程

1.获取数据（ ajax fetch ）

var data = {
id: 1,
name: 'csdn'
}

2. 创建vdom

 <div class = "box">
        <ul>
          <li> {{ data.name }} </li>
        </ul>
      </div> 

3. 通过render函数解析jsx，将其转换成 vdom结构

	var vdom = {
			tag: 'div',
			attr: {
			className: 'box'
			},
			content: [
			{
			tag: 'ul',
			content: [
				{
			tag: 'li',
			content: data.name
				}
			]
		}
	]
}

4. 将vdom渲染成真实dom
5. 数据更改了， data.name = ‘gfly’

 data.name = 'gfly'

    vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

6. 使用diff算法比对两次vdom,生成patch对象

7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

注意：vue是一是MVVM框架，Vue高性能的原因之一就是vdom

5. 什么是jsx?

jsx javascript + xml

6. 验证 key

• 列表循环一定加key
• key最好是使用具有唯一标识性的 id

7. 为什么列表循环要加key ?

key是用来做标识的（ 同级比较 ）

<div id="app">
<ul>
<li v-for = " (item,index) in list" :key = "item.id">
<p> {{ item.text }} </p>
<div>
<button @click = "changeStyle"> 修改样式 </button>
<button @click = "remove( index )">删除 </button>
</div>
</li>
</ul>
</div>

new Vue({
	el: '#app',
	data: {
	list: [
		{
			id: 1,
			text: '敲代码1'
		},
		{
			id: 2,
			text: '敲代码2'
		}
	]
},
	methods: {
		changeStyle ( e ) {
		//这段代码将来不要出现，
		// 理由： 我们应该避免操作真实dom
		e.target.parentNode.parentNode.style.background = 'red'
		},
	remove ( index ) {
		this.list.splice( index, 1 )
		}
	}
})

Vue有两大特性

1. 指令 – 用来操作dom

2. 组件 – 组件是html css js 等的一个聚合体

3. 为什么要使用组件？
   (1) 组件化
   a 将一个具备完整功能的项目的一部分进行多处使用
   b 加快项目的进度
   c 可以进行项目的复用
   (2) 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
   (3) 插件： index.html img css js
   (4) 如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

4. 基础的组件创建

   1. 全局注册

<div id="app">
	<Father></Father>
</div>
<div id="root">
	<Father></Father>
</div>

var Hello = Vue.extend({
	template: '<div> 这里是father组件 </div>'
}) //VueComponent( option )
	Vue.component( 'Father', Hello )
	new Vue({
	el: '#app'
})
	new Vue({
	el: '#root'
})

2. 局部注册

<div id="app">
	<ppk></ppk>
</div>
<div id="root">
	<ppk></ppk>
</div>

var Hello = Vue.extend({
	template: '<div> hello </div>'
})
	new Vue({
	el: '#app',
	components: {
// key: value key是组件名称 value是组件配置项
// 'ppk': Hello,
	'ppk': Hello
	}
})
new Vue({
	el: '#root'
})

5. 必须掌握的
   1. vue是如何扩展组件的？
   2. vue为什么要以标签的形式使用组件
   3. 组件使用为何要注册
6. 组件的一些特殊使用规则 【 is 规则】

is规则
ul>li ol>li table>tr>td select>option
如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug
解决： 使用is规则: 通过is属性来绑定一个组件

<tr is = "Hello"></tr>

<div id="app">
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr is = "Hello"></tr>
	</table>
</div>

Vue.component('Hello',{
	template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
})
new Vue({
	el: '#app'
})

7. 组件的template

template使用：

1. 实例范围内使用
   template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
2. 实例范围外使用
   实例范围外template标签是不会被直接解析的
   组件要想使用template使用，我们采用第二种
   但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示
   解决：使用webpack、gulp等工具编译，将来要用vue提供的单文件组件

<div id="app">
    <h3> 实例范围内使用 </h3>
        <template>
        <div>
 <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
</ul>
</div>
	</template>
<h3> 使用 hello 组件</h3>
    <Hello></Hello>
</div>
    <h3> 实例范围外使用 </h3>
<template id="hello">
    <div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
	</div>
</template>

Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})