Vue 的设计与实现

通过学习vue的实现方式,将所学的知识 js webpack等串联到一起, 来成为自己的内容。

1. 先列问题

.vue 文件的 读取和渲染

1) 模板语法 template 
  vue-template-loader
2) script  
   vue-loader
3) css的渲染
   css-loader / style-loader
   <a href="https://www.jianshu.com/p/d2470f719fee"></a> 
   <a href="https://blog.csdn.net/uwenhao2008/article/details/80752642"></a> 

vue框架的设计和构成

  vue是"编译" + "运行"时的语言, 是"声明式"编程
  编译: 将模板编译生成html文件,
          编译 ( compiler )  ->render(DOM树)-> create html
  运行: 改变数据会更改页面内容和结构
         运行() -> h() -> vnode(虚拟节点) -> patch() -> render()-> create html

vue实现

字符串模板 -> html

  差值表达式的判断 -> 
  递归遍历生成renderTree ->  收集依赖 收集effect() 生成v-bind v-for v-if/else v-solt
  mixin;
  render();
  extend();
  Component;
  patchVnode() ->html

Component

数据响应式( proxy ) 代理 vm[data][key] <- proxy -> vm[key]

数据驱动视图的更新

vuex

vueRouter

vue.use()

自定义扩展

vue future Api

vue 优化策略