组件化基础（mvvm）

很早就有组件化的

传统的组件、只是静态渲染、更新还是要依赖于操作dom
数据驱动视图-Vue（mvvm）
数据驱动视图-React setState

Vue的响应式

组件data的数据一旦变化、立刻触发视图更新
核心API-Object.defineProperty
1. 深度监听、需要递归到底，一次性计算量大
2. 无法直接监听新增和删除属性、需要用Vue.set和Vue.delete去做这个事情
3. 无法监听数组、需要重新定义数组原型（避免数据污染）去监听数组的变化
VUE3.0用的是Proxy 兼容性不够好、且无法polyfill。在安卓浏览器或者IE11上

Object.defineProperty基本使用

javascript 复制代码

const data = {}
const name ="zhaozy"
Object.defineProperty(data,'name',{
   get:function(){
      return name
   },
   set:function(newVal){
      name = newVal
   }
})

虚拟DOM和diff

vdom是实现vue和React的重要基石
1. vodm核心概念：h、vnode、patch、diff、key
diff算法是vdom中最核心、最关键的部分
DOM操作非常消耗性能、使用新旧vnode对比、得出最小的更新范围，最后更新dom。
一起的jQuery，可以自行控制DOM操作的时机、手动调整。

javascript 复制代码

//用JS模拟DOM结构

<div id="div1" class='container'>
   <p>vdom</p>
   <ul style="font-size:20px">
      <li>a</li>
   </ul>
</div>

{
   tag:'div',
   props:{
      className:'container',
      id:'div1'
   },
   children:[
      {
        tag:'p',
        children:'vdom',
      },
      {
        tag:'ul',
        props:{style:'font-size:20px'},
        children:[
           {
             tag:'li',
             children:'a'
           }
        ]
      }
   ]

基于snabbdom实现一个虚拟dom

定义一个h = snabbdom.h 函数
生成一个vnode 数据结构
patch 函数

diff算法

diff既对比、是一个广泛的概念、如linux diff命令、git diff等
两个js也可以做diff
两棵dom树做diff

树diff的时间复杂度O（n^3） :第一遍历tree1，第二便利tree2、第三排序 优化时间复杂度到O（n）:只比较同一层级、不垮级比较。tage不同、则直接删除重建、不再深度比较。tag和key、两者都相同、则认为是相同节点、不再深度比较

diff算法的总结

patchVnode
addVnodes、removeVnodes
updateChildren(Key的重要性)

模版编译

vue template complier 将模板编译为render函数
执行render函数生成vnode
基于vnode再执行patch和diff
使用webpack vue-loader、会在开发环境下编译模版。
vue组件中可以使用render代替template

witc语法

使用with，能改变{}内自由变量的查找方式、将{}内自由变量、当做obj的属性来查找。
如果找不到匹配的obj属性、就会报错。
with要慎用、它打破了作用域规则、易读性变差。

组件的渲染/更新过程

初次渲染过程
1. 解析模版为render函数（或在开发环境已完成、vue-loader）
2. 触发响应式、监听data属性getter setter
3. 执行render函数、生成vnode、patch（elem、vonde）
更新过程
1. 修改data、触发setter
2. 重新执行render函数、生成newVnode
3. patch（vonde、newVnode）
异步渲染
1. $nextTick
2. 汇总data的修改、一次性更新视图
3. 减少DOM操作次数、提高性能

VUE原理的总结

组件化
1. 组件化历史
2. 数据驱动视图
3. MVVM
响应式
1. Object.defineProperty
2. 监听对象（深度）、监听数组
3. Vue3.0用proxy
vdom与diff
模版编译
1. with语法
2. vnode结构
3. snabbdom使用：vnode、h、patch
渲染过程
1. 初次渲染过程
2. 更新过程
3. 异步渲染
前端路由
1. hash
2. H5 history
3. 对比两者

VUE响应式原理、虚拟dom、模版编译原理以及Vue组件渲染的过程