虚拟DOM与diff算法

1. 虚拟DOM( VDOM ) 和 diff算法
   总结：

   1. 虚拟DOM 是什么？
      虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构

   虚拟DOM的优缺点？
   2. diff算法
   diff算法是用来比较两个或是多个文件， 返回值是文件的不同点

   diff算法是同级比较的

   diff思维也是来自后端

   diff算法的比较思维
   比较后会出现四种情况：
   1、此节点是否被移除 -> 添加新的节点
   2、属性是否被改变 -> 旧属性改为新属性
   3、文本内容被改变-> 旧内容改为新内容
   4、节点要被整个替换 -> 结构完全不相同 移除整个替换

   3. 整个VDOM的使用流程（Vue）
   • 创建VDOM树
   • 利用render函数渲染页面
   • 数据改变，生成新的vDOM
   • 通过diff算法比较 新 旧 两个VDOM , 将不同的地方进行修改， 相同的地方就地复用 ， 最后在通过render函数渲染页面

2. 组件

• 组件化思维
  组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）

• 组件的概念（ 一个文件 ）
  组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体

  优点：代码复用，便于维护
  划分组件的原则：复用率高的，独立性强的

3. Vue中如何定义， 使用， 操作组件

   组件

   1. Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中 options
   2. Vue.component() 为什么要执行这个方法呢？
      • 组件的表现形式是标签，组件要想合法化， 必须注册

   组件的注册有两种方式

   1. 全局注册
      简写: Vue.component(组件的名称，options )
   2. 局部注册
      new Vue({
      components: {
      组件名： 组件的配置项
      }
      })

   组件命名建议使用两种方式
   使用 kebab-case
   举例
   Vue.component(‘header-title’,{})

   使用 PascalCase
   举例：
   Vue.component(‘MyComponentName’, { /* … */ })

   解释： 为什么要是上面两种写法 ? 为了区别html的原生标签

   组件的嵌套

   template

   组件根元素唯一

   data选项