前端框架面学习笔记（二）

1.MVVM 数据驱动视图

响应式核心API：object.defineproperty

缺点：深层对象递归性能问题，新增属性无法删除，不能监听数组变化，需要重写push，pop方法。

2.虚拟DOM

 <div>
     <p><span>xiedaimala.com</span></p>
     <span>jirengu.com</span>
 </div> 

let nodesData = {
    tag: 'div',
    children: [
        {
            tag: 'p',
            children: [
                {
                    tag: 'span',
                    children: [
                        {
                            tag: '#text',
                            text: 'xiedaimala.com'
                        }
                    ]
                }
            ]
        },
        {
            tag: 'span',
            children: [
                {
                    tag: '#text',
                    text: 'jirengu.com'
                }
            ]
        }
    ]
}

 

3.patch函数

4.模板编译template compiler 编译 render函数，执行生产vNode 

5.new Vue，执行初始化

挂载$mount方法，通过自定义render方法、template、el等生成render函数

通过Watcher监听数据的变化

当数据发生变化时，render函数执行生成VNode对象

通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

6.组件初次渲染过程：模板解析为render函数（webpack：vue-loader），触发响应式，监听data属性，执行render函数，生成vnode，patch对比节点，开始渲染。

更新：data触发setter，重新执行render函数，生成newVnode，执行patch。

 

 

7.异步渲染

$nextTick ，减少dom操作，节约性能

8.vue-router：

hash模式：改变hash触发网页前进后退，但是不会刷新，spa特点，不会有提交server端，完全前端控制

h5的history模式：也能实现单页面应用，但是改变url后如果刷新页面，在没写新url页面情况下会404；重要api：history.pushState()，window.onpopstate()