![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2.x 源码理解
Sima thief
游走在前端 的码农
展开
-
双向绑定补充 (v-model)分析
v-mode最后实际上是在当前实例(el)上添加addAttr(el, ‘value’, (${value})) 相当于(el.prop)addHandler(el, event, code, null, true) (el. event)实际v-mode相当于读法糖最后生成代码描述:"_c('div',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],原创 2020-09-10 16:19:07 · 258 阅读 · 0 评论 -
响应式与双向绑定区别
有很多同学把双向绑定就等同于响应式 , 其实是不对 的。在这里我们分析 一下 二者的区别:响应式:响应式 单身的 (数据流向视图)它是通过 Object.defineProperty()实现的特别要指出的是 , option.data 中的选项都会被响应式,都会有一个观察者目标(dep)实例 , 但不是所有的选项都能被收集响应式 依赖,只有当你getter 才会去收集选项依赖, setter时 , 派发依赖更新, 实际上为通知当前渲染watcher更新视图。双向绑定(v-model)原创 2020-09-09 15:13:13 · 4067 阅读 · 0 评论 -
依赖收集
首先 要所有 option.data都会被proxy,但 只有执行get的时候才会去收集依赖 ,且一个组件只有一个watcher , 由于js是单线程,所以一个时刻只有一个watcher在执行那么vue 是怎么收集依赖的呢可以当页面执行 mountComponent的时候 ,触发Object.defineProperty的函数const dep = new Dep()一个option.data 选项会有一个dep 实例if (Dep.target) { dep.de原创 2020-09-05 18:20:44 · 578 阅读 · 0 评论 -
vue2.x 是怎么让普通对象变为 响应式对象的呢
function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; if (!isPlainObject(data)) { data = {}; process.env.NODE_ENV !== 'production' && warn( .原创 2020-09-02 19:52:35 · 2189 阅读 · 0 评论 -
toRawType
/** * Get the raw type string of a value, e.g., [object Object]. */const _toString = Object.prototype.toStringexport function toRawType (value: any): string { return _toString.call(value).slice(8, -1)}尤大大 这个 方法 不能 区分普通对象和实例思考:普通对象和实例怎么区分...原创 2020-08-28 18:45:21 · 319 阅读 · 0 评论 -
派发更新
在派发更新更新中通过 setter 触发调用 dep.notify()vue 更新 的方式是遍历更新 所有 的watcher原创 2020-08-04 00:06:23 · 147 阅读 · 0 评论