资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Vue中的计算属性、方法与侦听器源码分析

这篇“Vue中的计算属性、方法与侦听器源码分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的计算属性、方法与侦听器源码分析”文章吧。

创新互联公司是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：响应式网站设计、品牌网站建设、成都营销网站建设。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都网站建设、网站制作、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

需求：在 data 中，有 firstName 和 lastName 两个内容，页面显示“全名 fullName ”。

我们直接使用插值表达式就能实现这个需求：




  
  前端一万小时-计算属性、方法与侦听器
  


  
    {{firstName + ' ' + lastName}} 
  
  

Vue中的计算属性、方法与侦听器源码分析

但需求是实现了，可同时模板上就有了一些逻辑。而模板本身是用来显示就好，并不需要添加逻辑在里面！

理想的方式是在插值表达式中直接添加 fullName 变量来显示全名：


  {{fullName}}

Vue中的计算属性、方法与侦听器源码分析

可以看到，当代码这样写时也是没有问题的。

但实际上代码冗余了：原本 data 内已经有了 firstName 和 lastName ，可以用它们组合出全名，但又重新定义了一次 fullName 。

接下来，将介绍另外三种方法来解决这个需求。

1 计算属性 computed


  {{fullName}}

使用计算属性后，代码完全不会冗余， fullName 是根据 firstName 和 lastName 计算出来的，页面上的效果也是一样。Vue中的计算属性、方法与侦听器源码分析

计算属性还有一个非常重要的知识点：

计算属性会基于它们的响应式依赖进行缓存。

也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。

在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时则用缓存的上次计算结果。


  {{fullName}}

  {{age}} 
  

保存刷新网页后，可以看到计算属性 计算了一次 。当在控制台输入 vm.age = 20 更改 age 后，页面重新渲染了，“18”变为了“20”，但控制台没有再次输出 计算了一次 ，即计算属性没有进行重新计算。

Vue中的计算属性、方法与侦听器源码分析

而当我们更改 lastName 后，会重新计算一次：

Vue中的计算属性、方法与侦听器源码分析

2 方法 methods

第二种是我们已经非常熟悉的方法 methods：



  
  {{fullName()}}

  {{age}}

保存后，刷新页面查看效果时，它会进行一次计算。当我们更改 age 时，它会再计算一次，更改 lastName 时也会进行一次计算：Vue中的计算属性、方法与侦听器源码分析

所以方法是没有缓存机制的，只要页面重新渲染， fullName 方法就会被重新执行一次。

3 侦听器 watch

当使用侦听器时，不可避免的会让代码冗余：



  {{fullName}} 

  {{age}}

保存后回到页面刷新。当第一次进入页面时，因为我们重新定义过 fullName ，所以 watch 不会进行计算就会显示出来。在修改与 fullName 不想关的数据 age 后，由于我们只用 watch 侦听了 firstName 和 lastName ，所以也不会进行计算。当我们修改 lastName 时，则进行一次计算：

Vue中的计算属性、方法与侦听器源码分析

以上就是关于“Vue中的计算属性、方法与侦听器源码分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


新闻名称：Vue中的计算属性、方法与侦听器源码分析
当前地址：http://cdkjz.cn/article/ghojhc.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都托管服务器app软件开发公司珉田数据中心成都LED显示屏成都服务器机柜租用堡垒主机网站制作成都木托盘成都广告招牌制作小谭建站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图