vue原理

组件化

数据驱动视图
传统组件,只是静态的渲染,更行还是依赖于操作DOM
数据驱动视图--Vue(MVVM)
数据驱动视图--React(setState)

响应式

核心API definedProperty getter和setter 深度监听
对数组的监听 重新定义原型

vdom和diff
模版编译

模版编译为一个render函数,执行render函数返回vnode
基于vnode再执行pacth和diff
使用webpack vue-loader ,再开发环境下编译模版

渲染过程
  • 初次渲染
    解析模版为render函数(或在开发环境已完成,vue-loader)
    触发响应式 监听data属性的getter和setter
    执行render函数生成vnode 再进行pacth(elem, vnode)
  • 更新过程
    修改data触发setter(此前再getter中监听)
    重新执行render函数,生成newVnode
    patch(vnode, newVnode)
  • 异步渲染
前端路由

你可能感兴趣的:(vue原理)