vue开发使用计算属性必备的注意事项

先上代码，先上代码：本例中的getStartTime依赖于data中的start_time

<p>本次活动截至到 <strong>2021年{{getStartTime[0]}}月{{getStartTime[1]}}日</strong></p>

getStartTime:function(){
    this.startMonth = new Date(this.start_time).getMonth()+1;
    this.startDay = new Date(this.start_time).getDate();
    return [this.startMonth,this.startDay];
},

文章目录

• 前言
• 一、什么是计算属性？
• 二、使用步骤
  • 1.建立属性依赖
  • 2.计算数据
  • 3.DOM中引用计算属性
• 总结

 

---

前言

随着Vue框架的兴起，有关这门技术的相关概念也越来越重要，很多人都开启了vue框架的使用学习，但是受制于经验，很多人刚开始可能不会使用vue框架中的一些概念和方法，

因此本文就介绍了有关vue中计算属性的基础内容，希望对大家有帮助。

---

 

一、计算属性是什么？

老生常谈的话题。首先既然叫属性，肯定它的使用方式和js中常见的属性有相似之处，字面意思理解，计算属性就是通过一套逻辑计算得到结果。

我们看下官方文档：好吧，官方也没给定义，就是几个简单的例子供大家理解

二、使用步骤

1.建立属性依赖

通过文章开头的（示例）：

我们大致可以知道，使用计算属性，先要建立属性依赖，就像例子中的一样，getStartTime的值最终取决于start_time和中间的计算逻辑；

start_time  ==>  计算逻辑  ==》getStartTime

大致可以明白，计算逻辑搭建起了原属性和getStartTime之间的沟通桥梁，也即属性依赖。

源属性和计算逻辑决定着计算属性最终的结果。

---

 

2.计算数据

通过开头的（示例）：

计算数据需要在computed:{}块中实现，实现方式需要先定义计算属性，后接函数，用来封装计算逻辑，也即建立依赖的过程

1. 定义计算属性
2. 后接函数，封装计算逻辑

---

 

3.DOM中引用计算属性

就像开头（示例）所描述的那样使用，如果还不理解，就记着他的字面意思，计算属性计算属性，就得和vue中属性（property）的使用方式一样才行

<p>
{{getStartTime}}
</p>

 

---

总结

vue中计算属性的使用方式很简单，关键要理解才能快速的应用到日常的开发中去。