推广

vue源码解读–计算属性

iseeyu3年前 (2024-02-21)推广126

默认情况下页面将渲染出”default”,当我们第一次点击onChangeIndex函数后将显示”三岁就会写bug”,同时打印出”update”,当再次点击则页面不会有变化,但是仍然打印出”update”;当点击onChangeName后页面展示”三岁就会写bug哦”,同时打印”update”,当再次点击时,则页面无变化同时不会打印”update”.

那么为什么会这样呢?

几个小

我们之前在分析组件的createComponent和组件的init时候都跳过了部分关于computed的逻辑

     在组件创建的过程中,调用extend,判断computed是否存在,然后进行计算属性的init,继而调用defineComputed

     在组件的init过程中,调用initState方法,该方法除了对props、data执行了相关逻辑外,还判断了computed是否存在,并在存在时调用其init,继而调用defineComputed

        也就是说,vue在构建组件构造器时候便已经对compoted进行了处理,而处理函数即defineComputed,那么我现在有3个疑问:a-为什么要提前处理?b-两处处理有什么不同?c-只处理一次行不行?

         首先看extend中的处理

                     首先拿到组件的options对象,并对computed进行遍历,并对每一个key(name函数)调用defineComputed,入参为组件的原型、name函数

             再看init过程

            可以看到,两次都是拿到computed的key遍历调用defineComputed,不一样的是,一次传入的target是实例的原型,一次则是vm实例。我们都知道this会首先查找实例本身,若不存在则跟随原型链查找原型对象。且for…in循环具有查找原型链的能力。也就是说,同一个组件,只会在构建构造器时候执行一次。当对组件进行初始化时候,for…in将查找到原型上存在的key,故不会重复多次调用defineComputed。这可以认为是一种”数据共享”,是一种优化手段

            所以,之前的疑问可以这么回答:为了避免当在同一个页面中多次使用同一个组件时每次都在组件中定义一遍key造成性能浪费,便利用原型链特性一劳永逸的在构建组件阶段放置到原型链上以避免走重复逻辑(疑问a、b);只在组件上定义会存在a、b提出的性能问题,而只在原型上定义则无法针对如mixin一类后植入的key进行处理(疑问c)

创建过程

当执行组件初始化过程中会调用initState并判断computed存在执行initComputed,传入组件实例和在组件中定义的computed对象(我们这里即name函数)

        –向组件实例挂载_computedWatchers,默认是空对象,并通过Object.create赋予其原型链访问权力

        –isSSR在浏览器环境下为false,进入判断,进行watcher实例化。入参为:组件实例、getter函数(name函数)、noop空函数、{ lazy: true }。实例化watcher的关键信息如下

(在计算时作为判断条件)

(在计算时调用)

(可以看到,在创建过程中并没有调用get进行计算,而是返回undefined)

        –使用for…in循环拿到每一个key,即我们定义的每一个函数

        –向实例的_computedWatchers上绑定一个watcher,从之前文章的分析我们知道watcher将在一定的时机触发update进行patch最终渲染为dom

        –调用defineComputed,将组件实例、每一个计算属性的key及其对应的处理函数(name函数)传入

                –shouldCache为true    

                –sharedPropertyDefinition.get对应的是一个匿名函数

                –由于将sharedPropertyDefinition作为Object.defineProperty的属性描述符,故当访问this.name时,将会触发拦截从而调用sharedPropertyDefinition的get方法,而get方法指向上一步返回的computedGetter函数

计算过程–default

        当vue将组件编译为render函数的过程中将对模板中的变量name进行访问,此时将触发sharedPropertyDefinition的get,即computedGetter函数

        –拿到我们在创建过程中保存的每一个computed.key对应的watcher

        –调用evalute函数

                 调用get函数,求值

                    –向dep.target保存this

                    –调用getter函数,即name函数

(计算得出’default’并返回)

        –调用depend函数

                这实际上调用的是

(经过之前的分析,我们知道这实际上是一次依赖收集。其中dep是发布者,watcher是订阅者,这里为了在发布者中保存订阅以便在适当的时机去发布广播触发更新)

因此,得出的值为”default”

计算过程–三岁就会写bug

        当我们点击onChangeIndex函数将手动把saveIndex加加,由于saveIndex是在data中定义的响应式数据,故它将首先走向get方法进行依赖收集,此时dep中将有两个订阅者:计算属性name和saveIndex

        加加的操作则触发saveIndex的set方法,将触发dep的notify

            继而调用watcher的update,由于第一个dep是计算属性的,故只会执行到this.lazy中将this.dirty置为true后便会调用saveIndex对应watcher的update,此次将触发queueWatcher执行render,而在render的过程中将再次访问name,此时this.saveIndex>0成立,获取firstName和lastName并计算返回

因此,得出的值为”三岁就会写bug”

最后关于”当点击onChangeName后页面展示”三岁就会写bug哦”,同时打印”update”,当再次点击时,则页面无变化同时不会打印”update”.”,主要是因为在set拦截中进行了值比较,当相等时则return,因此不会重新render,故而无法调用update

可以看到,当其依赖项发生变化时总是会重新求值,但是如果求出的值相等时vue并没有做限制,而是每次都重新计算了一次。这样的不合理可能是由于我当前看的源码版本(2.5.2)较老导致的,毕竟尤大这样的神级人物不会考虑不到这一点

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/57218.html

相关文章

朋友圈玩转私域流量运营方法 高质量私域运营是怎么样的。

朋友圈玩转私域流量运营方法 高质量私域运营是怎么样的。

最近这段时间关于私域流量的话题越来越火,尤其是近日微信对违规外挂下手,再次打响了私域流量的战役,身边有很多朋友问小编怎么看: 所以想用这篇文章和大家简单地探讨下: 1、关于私域流量,企业要不要入局? 2、已经入局的企业,该如何玩转私域流量? 什么是私域流量? 目...

APP推广的5大方法

APP推广的5大方法

  现在打开应用商店,无论是苹果的,还是华为的,小米的,都能看到数不清的各种应用APP,随着开源和开发成本的降低,越来越多的企业都在开发属于自己的APP,总以为APP的发展是这样的:开发→上线→大量新增用户→百万月活…..等等。 实际你可能遇到的是这样的:开发→上线→每天新增...

超级店长如何加速(淘宝超级店长功能介绍)

超级店长如何加速(淘宝超级店长功能介绍)

  现在开淘宝店铺,如果不懂的如何去运营,那么就很难做好这个事情,但好在现在的工具非常的多,那么淘宝店铺开店之后,这个超级店长的工具好用吗?一般这个工具有哪些功能呢?请看详细介绍!   淘宝的超级店长,虽然是为中小型卖家打造的,而且它的主要包含实现流量推广,短信促销,查类目查排名,一键搬家,快...

轻松掌握!拼多多砍价链接怎么生成口令全攻略

轻松掌握!拼多多砍价链接怎么生成口令全攻略

拼多多砍价链接怎么生成口令?这是很多拼多多用户心中的疑惑。别急,今天,我将为你一一解答,让你轻松掌握拼多多砍价链接生成口令的技巧。 一、拼多多砍价链接生成口令的原理 我们要了解拼多多砍价链接生成口令的原理。其实,这个过程可以简单理解为:用户分享商品链接,生成独特的砍价口令,其他人通...

销售人员管理制度

销售人员管理制度

销售人员管理办法A: 销售人员管理办法1. 总则1.1. 制定目的为加强本公司销售管理,达成销售目标,提升经营绩效,将销售人员之业务活动予以制度化,特制定本规章。a) 适用范围凡本公司销售人员之管理,除另有规定外,均依照本办法所规范的体制管理之。b) 权责单位(1) 销售部...

环球漫评|“五个一百”,网络正能量的“放大镜”和“倍增器”

来源:环球网漫画作者:刘军延连日来,2021中国正能量 “五个一百”网络精品征集评选展播活动进入了如火如荼的投票阶段,截至24日18时,“五个一百”活动浏览量已高达16017714次,投票量累计3882469次。吸引了众多网友“围观”优秀作品,为网络正能量点赞,为新时代取得...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片