240 发简信
IP属地:山西
  • 数据响应式过程中,如果是对象和数组,会创建一个Observer对象并挂载到该对象或数组的__ob__属性上,此Observer对象内的subs数组持有的Watcher对象,与该对象或数组对应的上级对象的key属性对应的watcher一致(该key会在闭包内创建自己的Dep),如果上级对象仍然是数组,则会继续往上找,直到找到对象属性对应的watcher,直接对该对象增减属性或者对该数组内的某项进行替换并不会通知到Observer,相反通过Vue提供的$set和$delete则会主动通知该对象或数组上的Observer,并最终执行各watcher内的update实现更新,数组的更新同理,通过对数组原型方法进行重写实现主动通知Observer。

    Vue源码解读一:Vue数据响应式原理

    这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释。(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了。)通过阅读这篇文章,...

  • 120
    Vue源码解读一:Vue数据响应式原理

    这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释。(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了。)通过阅读这篇文章,...

  • 120
    关于computed源码

    问:下面代码从store中取值,如果template中没有使用msg, 初始化加载会打印吗?其他页面改变store的值,这里会执行打印吗? 答: 不会。computed触发条...

  • 1. 计算属性初始化时创建计算watcher并保存至实例的_computedWatchers中,由于lazy为true,get函数没有执行,所以value为undefined
    2. 模板解析到对应的计算属性时,创建渲染watcher对象,由于lazy为false,所以会在构造器中执行get函数
    3. 在get函数中,先将当前渲染watcher对象入栈(pushTarget),然后执行计算属性对应的getter函数
    4. 此时的getter函数即为计算属性初始化时创建的getter(computedGetter),然后取出第一步中放入_computedWatchers数组中的watcher,判断到dirty为true,执行其evaluate方法
    5. 在evaluate方法内调用到get函数,此时再将当前的计算watcher入栈(pushTarget),然后执行getter函数(此getter函数为创建计算watcher对象时传入的getter,即用户定义的计算属性对应的get函数),getter函数执行的过程即为依赖收集的过程,一个或多个dep会保存到该watcher对象的newDeps数组中(watcher和dep会互相持有对方的引用)。完成后将计算watcher出栈(popTarget),所以此时的Dep.target变回渲染watcher。然后执行cleanupDeps函数,将newDeps的数据移动到deps中,最后将dirty置为false
    6. 继续向下执行,执行计算watcher的depend函数,这里设计的很巧妙,depend函数内部会遍历上一步得到的deps数组,然后对其依次执行dep.depend函数,而dep对象内部则会将Dep.target(渲染watcher)添加到当前dep对象中,相当于是帮助渲染watcher收集了依赖。然后渲染watcher出栈,执行cleanupDeps函数,此时Dep.target为undefined
    7. 最后会返回计算watcher对象的value属性,这个值即为computed属性对应的缓存,在dirty为false时会直接返回该值
    8. 举个例子,假如现在定义一个计算属性fullname(){return this.firstname + this.lastname},当this.firstname有更新时,会执行该属性对应的dep对象的notify方法,即遍历subs数组内的watcher执行其update方法,经过前面的分析,subs数组内的watcher对象至少有两个,即计算watcher和渲染watcher。所以计算watcher会将dirty置为true,然后渲染watcher会再次执行到evaluate函数刷新计算属性的值,并更新视图
    9. 如果没有在模板中使用,直接在JS代码中使用,虽然第一次使用时会进行value求值,但后续的使用就会直接使用value缓存,如果完全没使用到计算属性,那么它的值就一直是undefined,这就是它相比methods优秀的地方

    关于computed源码

    问:下面代码从store中取值,如果template中没有使用msg, 初始化加载会打印吗?其他页面改变store的值,这里会执行打印吗? 答: 不会。computed触发条...

  • 10000小时后,我从外包走进了字节跳动

    目录 10000小时练习 我做对的事情 被“字节范儿”圈粉 下一个3年 你配得上所有美好的事物,但你必须自己主动去拿。 10000小时练习 关于10000小时定律,你可能在很...

  • 如何在 JS 循环中正确使用 async 与 await

    async 与 await 的使用方式相对简单。 当你尝试在循环中使用await时,事情就会变得复杂一些。 在本文中,分享一些在如果循环中使用await值得注意的问题。 准备...

  • 120
    Vue render函数

    前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的render函数自己只是看了官方的一些介绍,并未深入一点去了解这方...

  • 120
    深入浅出Object.defineProperty()

    讲解大致会根据下图展开 本文部分参考了书籍《你不知道的javascript》上卷 对象的定义与赋值 经常使用的定义与赋值方法obj.prop =value或者obj['pro...

  • [ES6]什么是变量提升和暂时性死区

    变量提升 var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。...

  • 写的不错,必须给个赞!

    weex开发之与web交互

    在做weex开发中遇到一个需要与web交互的需求。看了下weexSDK,在0.20以上的版本中是有与web交互的api的。所以先升级sdk,iOS和Android都通用! 原...

  • weex开发之与web交互

    在做weex开发中遇到一个需要与web交互的需求。看了下weexSDK,在0.20以上的版本中是有与web交互的api的。所以先升级sdk,iOS和Android都通用! 原...

  • Weex组件<waterfall>瀑布流和GridView效果的使用——Weex的学习之路(九)

    最近项目有点忙,weex学习更新稍微慢了些。近期给自己列了一个学习计划表,想用weex做一个App,目前觉得列表比较好做,同时weex原生组件使用起来都很方便,就是一些自定义...

  • 120
    UIStackView学习分享, 纯代码实现

    最近看叶孤城的书,里面提到了UIStackView,说起这种布局,也是很早就知道了,但是一直没有研究过,开发中也没有使用过,周末上网翻看一下了大家的文章,发现大多都是Stor...