Vue
new Vue
初始化生命周期、 事件、data、props、watch、computed, 通过Object.defineProprety 设置 setter、 getter 函数实现响应式 以及 依赖收集;
初始化之后 调用$mount进行组件挂载
template 需要编译、 render , function不需要编译
vue2 编译
parse => AST、
optimize => 标记 static 静态节点(在update时, diff 算法的 path 会直接 跳过 静态static 节点提升性能)、
generate (AST) => render function (字符串、 staticRenderFns)
在经历过 `parse`、`optimize` 与 `generate` 这三个阶段以后,组件中就会存在渲染 VNode 所需的 render function 了。
render function 在渲染时 会读取所需要的值, 触发getter 进行依赖收集,
依赖收集 将观察者 watcher 对象 存放到 当前闭包的 Dep订阅者的 subs中
触发setter时候 , setter 通知之前的依赖收集得到 Dep 中的subs (订阅)多个watcher , 触发notify (发布) 通知每一个subs 的watcher 更新视图, watcher => update , 触发 patch 经过 diff算法 (双指针, 纵向对比)
VNode
节点有更多的属性来标志节点,比如 isStatic (代表是否为静态节点)、 isComment (代表是否为注释节点)等。
vue的双向数据绑定实现原理
采用数据劫持和发布者-订阅者模式 数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter,在数据变动是发布消息给订阅者,从而触发相应的回调来更新视图,下面来一步步实现。 基于 object.defineProperty 定义 setter, getter proxy
观察者模式 vs 发布-订阅模式
watcher 是在render funtion 在渲染的时候 触出发getter 进行依赖收集 依赖收集 将watcher 对象放入 Dep订阅的subs中 (订阅), 当时出发setter 的时候, setter 通知 之前进行依赖收集的Dep 的subs (订阅)多个watcher 出发 notify(发布) 通知每一个 subs 的watcher 更新视图 watcher => update 触发 patch 更过diff 算法 (双指针, 纵向对比)然后更新VNode
对于 MVVM 理解的
什么是MVC MVC 是 Model-View-Controller 的缩写,即 模型—视图—控制器 。 Model:后端传递的 数据 。 View:所看到的 页面 。 Controller:页面 业务逻辑 。 MVC是 单向通信 。即View和Model,必须通过Controller来承上启下。 使用MVC的 目的 就是 将M和V的代码分离 。 MVC和MVVM的关系 MVVM是将之前的MVC后端开发: M:model数据库中的数据 V:view前端页面 C:controller后端控制器 中的V即View分成了MVVM模式 MVVM模式:不需要用户手动的操作dom的,主要是实现数据双向绑定 [扩展问题]:VUE和MVVM的关系 Vue.js 可以说是MVVM 架构的最佳实践,VUE并没有完全遵循MVVM,专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API 简洁,很容易上手 欢迎留言```
vue的数据双向绑定原理
Object.defineProperty
vue封装组件
vue-router实现原理,为什么要选vue,与其它框架对比的优势和劣势
vuex是用来做什么的,vue源码结构
组件的通讯方式
props/ $emit $emit/$on vuex $attrs/$listeners 可以在 props 控制接收#attrs provide/inject 实现响应式 2.6版本 使用observable $parent / $children与 ref