虚拟Dom和组件注册

虚拟dom && diff算法

vdom是什么？
​ 它是一个Object对象模型，用来模拟真实dom节点的结构

// 1.获取数据（ ajax   fetch ）
​    var data = {
​      id: 1,
​      name: '1903'
​    }
  // 2. 创建vdom
​    var vdom = {
​      tag: 'div',
​      attr: {
​        className: 'box'
​      },
​      content: [
​        {
​          tag: 'ul',
​          content: [
​            {
​              tag: 'li',
​              content: data.name
​            }
​          ]
​        }
​      ]
​    }
​    //3. 初次渲染 vdom( vdom渲染成  真实dom )
​      // var div = document.createElement('DIV')
​      // div.className = 'box'
​      // var ul = document.createElement('UL')
​      // var li = document.createElement('LI'
//4.render 函数进行渲染
   /*<div class = "box">
​    	<ul>
​       	<li> {{ data.name }} </li>
​       </ul>
​    </div>
​   */

vue中使用的是一个叫做jsx语法 + render函数,
但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml 搞出了一个新的语法糖 jsx ，用jsx来模拟vdom
数据更改了，使用diff算法比对两次vdom,生成patch对象

• diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
• diff算法来源后端
• 前端将其应用于虚拟dom的diff算法
• vue中将 虚拟dom的diff算法放在了 patch.js文件中
• 使用js来进行两个对象的比较（ vdom 对象模型）
• diff算法是同级比较
• 给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）
• 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

组件注册

Vue.extend()与Vue 这两个options基本一致
​- methods
​- computed
​- data
​- mixins

var text= Vue.extend({
	template: '<div> 这里是组件 </div>'
  })
  Vue.component( 'Box', text)

全局就是Vue.component在Vue实例外，局部就是Vue.component在Vue实例内

new Vue({
    components: {
      'Box': text
    }
  })
​```

简写

不需要Vue.extend（），text->{

​    template: '<div> 这里是全局注册 </div>'

  }即可

嵌套

子组件以标签的形式放在父组件的模板中使用，切记，不要放在父组件的内容中

如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug

解决： 使用is规则: 通过is属性来绑定一个组件

Vue.component(‘Hello’,{
​ template: ’ 4 2 3 ’
})

``` template使用： 1. 实例范围内使用 template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的 2. 实例范围外使用 实例范围外template标签是不会被直接解析的

组件要想使用template使用，我们采用第二种

但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

<template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
</template>
Vue.component('Hello',{
    template: '#hello'
})

new Vue({
    
 }).$mount('#app')

解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件