![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue源码分析拓展
文章平均质量分 63
Vue源码分析拓展
路人i++
这个作者很懒,什么都没留下…
展开
-
Vue源码分析拓展 - Vue 模板编译渲染函数原理分析
render function —touch【依赖收集】—>getter。generate:针对不同目标平台生成的代码。optimize:静态节点优化。patch():更新数据,新老旧DOM对比,【组件映射成真实DOM中间起桥接作用】了。这三个阶段以后,组件中就会存在渲染。【不会改变的一些结构】new Vue():初始化。compile():编译。Watcher:观察数据。字符串的过程,得到结果是。DOM :映射到DOM。三个阶段,最终需要得到。【虚拟DOM】所需的。原创 2023-07-14 23:00:00 · 242 阅读 · 0 评论 -
Vue源码分析拓展 - 响应式系统搭建
当你把一个普通的JavaScript对象传入Vue实例作为data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter.每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把”接触“过的数据属性记录为依赖。这些getter/setter.对用户来说是不可见的,但是在内部他们让Vue能够追踪依赖,在属性被访问和修改时通知变更。献上一张AI生成图~原创 2023-07-13 06:15:00 · 121 阅读 · 0 评论 -
Vue源码分析拓展 - Vue生命周期钩子函数执行原理分析
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如created钩子可用用来在一个实例被创建之后执行代码,也有一些其它的钩子,在实例生命周期的不同阶段被调用,如mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的Vue实例。原创 2023-07-12 06:30:00 · 147 阅读 · 0 评论