qq_29582173的博客

Vue 源码解析 06-手写自己的 Vue最近一段时间一直在研究 Vue 的源码,突然间想写一个乞丐的 Vue 实现,为了理一下自己的思路,同时也作为一个阶段性的总结.实现双向数据绑定Vue 双向绑定看这里Vue2.0/1.0 双向数据绑定简单来说就是利用了 Object.defineProperty()和观察者模式对 data 数据进行数据劫持.废话不多说,直接上代码Watcher 实现数据的更新操作//Watcher,观察者,真正执行更新操作的角色 class Watcher{

Vue源码解析05-组件化前言组件(Component)是Vue.js框架强大的功能之一,我们想要编写一个完整、健壮的项目离不开Vue的组件,所以本渣从源码角度梳理了一下Vue组件的创建流程,在此做简单记录个人认为Vue的组件分三步组件的创建(我们平常会使用Vue.component创建一个全局组件)组件的解析,也就是将组件转化为对应的VNode(平常我们说的虚拟DOM)组件的挂载(...

手写虚拟DOM什么是虚拟DOM概念虚拟DOM(Virtual DOM) 是对DOM的JS抽象表示，它们是JS对象，能够描述DOM的结构和关系。应用的各种状态变化会体现虚拟DOM上，最终映射到真实DOM。虚拟DOM的优点虚拟DOM轻量、快速。当虚拟DOM发生变化时通过新旧虚拟DOM的对比，得到最小的DOM操作量，从而提升性能和用户体验。跨平台：虚拟DOM是可以实现跨平台的，将...

Vue 源码解析03-异步更新队列前言这篇文章分析了Vue更新过程中使用的异步更新队列的相关代码。通过对异步更新队列的研究和学习，加深对Vue更新机制的理解什么是异步更新队列先看看下面的例子： <div id="app"> <div id="div" v-if="isShow">被隐藏的内容</div> <i...

Vue源码解析02-数据响应式开篇之前先了解几个相关概念MVC模式模式简介MVC的全称是Model(模型)-View(视图)-Controller(控制器)Model：这是数据层，存储项目所需的数据。Model的作用是返回或者更新数据。在应用中常用于数据库存储数据。View：视图层，用于想用户显示数据。View本身不显示任何数据，而是Controller或者Model让Vie...

Vue源码解析01首先来一张Vue工作流程图，作为整个Vue源码解析的基础初始化new Vue() 初始化创建Vue实例，初始化data、props、events等挂载$mount 挂载执行编译，首次渲染、创建和追加过程编译compile() 编译，该阶段分为三个阶段parse、optimize、generate渲染render function 渲染函数，渲染函数执行时会触发...

Vue 组件之间传值父子组件之间父组件向子组件传值属性props //child props:{msg:String} //parent <child msg="由父组件传入"></child>特性 $attrs //child，并未在组件中声明props <p>{{$attrs.msg}}&l...

.sync和v-model的区别v-model <!--父组件--> <template> <!--v-model 是语法糖--> <Child v-model="model"></Child> <!--相当于下面的代码--> <!--v-...