Vue计算属性详解

简介: Vue计算属性详解

1、什么是计算属性

写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用

2、为什么要有计算属性

1. 为什么不是使用模板语法

虽然模板语法使用非常便利,但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

2. 为什么不是使用method对于复杂逻辑

无论计算属性还是methos,这两种实现方式的最终结果是完全相同的。

因为计算属性是基于缓存实现的,只在计算属性所依赖的数据发生改变时它们才会重新求值,否则访问 计算属性会立即返回之前的计算结果,而不必再次执行函数。 相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

3. 什么时候要用计算属性

 对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性

4. 定义计算属性fullName

<script>
   export default {
        data: {
            firstName: '熊',
            lastName: '大'
        },
        computed:{
            fullName:{
               get(){
                   return this.firstName +'-'+  this.lastName
               },
               set(value){
               }
            }
        }
</script>

5. 计算属性的配置项

   get():必须要写,该函数不接受参数

   get()什么时候被调用?:当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用,getter函数有一个返回值,该返回值就是计算属性的值

   set():可选项,接受一个可选参数(计算属性被修改之后的值)

   set()什么时候被调用?: 当计算属性被修改时被调用

   get()和 set()中出现的this执向vm


计算属性整个过程

   当第一次调用get()之后,Vue实例身上会出现一个与计算属性同名的属性(我称为计算属性的缓存属性),该属性的值就是调用get()返回的值

   当再次调用getter之后,Vue把getter返回的值赋值给这个缓存属性

   缓存属性:因此当不是初次访问计算属性时且计算属性所依赖的数据没有发生变化时,Vue实际上用的是这个属性,而不是再次执行get()


   原理:底层借助了Object.defineProperty方法提供的getter和setter


简写

   当计算属性只需要get时才可以简写

<script>
    export default {
        data: {
            firstName: '熊',
            lastName: '大'
        },
        computed:{
             //这个函数就是getter
             fullName:function(){
                    return this.firstName +'-'+  this.lastName
             }
        }
     }
</script>

使用:

  • {{计算属性}}
<div>
  <span>hello,{{fullName}}<span>
  <!--fullName是个计算属性-->    
<div>  
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
162 0
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
109 1
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
123 1
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
485 0
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
122 0
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
229 77
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问