vue.js设计与实现

一、提升用户的开发体验 关于打印ref数据 二、控制框架代码的体积 方法： 打包工具webpack和rollup会通过tree-shakingq去掉无用的代码 实现： 通过__DEV_ _等常量的使用

一、声明式地描述UI 声明式： 渲染函数（返回虚拟DOM， 组件的渲染内容） 渲染函数 + h(h一个辅助创建虚拟DOM的工具函数) h(type, props, children) 二、初识渲染器

一、响应式数据与副作用函数 副作用函数： effect函数执行时， 但除了effect函数之外的任何函数都可以读取或者设置body的文本内容 effect函数修改了全局变量， 但除了effect函数之

一、理解proxy和Reflect 1.1、proxy proxy： 使用proxy可以创建一个代理对象， 能够实现对其他对象的代理， 也就是proxy只能代理对象， 无法代理非对象值， 例如字符串、

一、数组的索引与length 1、问题一 1.1、问题 当前对数组进行读取和设置已经能满足要求 2、 当数组进行设置，设置的索引值大于数组当前长度， 要命更新数组的length属性， 下面代码需要建立

set和map两种原型属性和方法 相同的方法 size delete has clear keys values entries forEach 不同的方法 1、set add 2、map set g

1、引入ref的概念 非对象的变量无法使用proxy进行代理，需要进行包裹， 由此引出ref 需要给ref一个标识， 方便后面脱ref 2、响应丢失问题 这是涉及到实际应用 上面的展开运算符会导致响应

1、渲染器与响应系统的结合 响应系统和渲染器之间的管理： 利用响应系统的能力， 自动调用渲染器完成页面的渲染和更新 2、渲染器的基本概念 渲染器： 渲染器的作用是把虚拟DOM渲染为特定平台上的真实元素

1、挂载子节点和元素属性 1.1挂载子节点 一个元素除了文本节点外， 还可以包含其他元素子节点， 非文本节点可以创建为数组 这时候对应修改mountElement函数 patch的第一个参数为null

通过记录移动的旧vnode中最大排序值，小于排序值的进行移动， 大于vnode则更新最大排序值 新vnode的顺序就是想要更新的顺序 移动DOM、加载DOM、删除DOM 遍历过程， 只有新vnode当

比较头部 比较尾部 比较新尾旧头 比较新头旧尾 找不到遍历旧vnode寻找新头 找到， 插入Dom头部， 原位置置为undefined; 找不到， 挂载插入Dom头部 旧节点比对完， 但是新节点还没有

快速diff 1、去掉相同的前置元素 j 2、去掉相同的后置元素 newEnd oldEnd 3、如果 j <= newEnd && j > oldEnd 需要挂载元素 j 到newEnd的元素， 挂

一、渲染组件 组件的vnode如下 在patch添加组件类型的判断 mountComponent的实现 二、组件状态和自更新 1、组件自身状态的初始化 2、自更新 当组件自身状态发生变化时， 需要有能

一、异步组件 1、为什么要封装 节省用户的工作量， 能够提供拓展功能 封装前 封装后 注意： defineAsynComponent函数本质是一个高阶函数， 返回值是一个包装组件 包装组件会根据加载器

一、KeepAlive组件的实现原理 1、组件的失活和激活 keepAlive的本质：缓存管理， 配上特殊的挂载和卸载逻辑， keepAlive的卸载：keepAlive的组件从原容器搬运到另一个隐藏