Vue之计算属性详解

1、何为计算属性：大白话讲就是计算出来的结果保存在属性当中，可以想象为缓存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--注意了同志们是currentTime1()，这里有加括号的，是方法调用.-->
    <p>currentTime1：{{currentTime1()}}</p>
    <!--这里的currentTime1是没有加括号的，通过属性进行调用的-->
    <p>currentTime2：{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue!"
        },
        methods: {
            currentTime1: function () {
                // 返回当前时间戳
                return Date.now();
            }
        },
        computed: {
            /*注意：这里就有计算属性了：而且methods和computed方法名不能相同。
                   重名之后只会调用methods方法*/
            currentTime2: function () {
                this.message;
                // 返回当前时间戳
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

运行结果：

可能咋一看好像没什么区别呀。

但是我们仔细思考一下，一个是方法，一个是属性。

如下所示：

<div id="app">
    <!--注意了同志们是currentTime1()，这里有加括号的，是方法调用.-->
    <p>currentTime1：{{currentTime1()}}</p>
    <!--这里的currentTime1是没有加括号的，通过属性进行调用的-->
    <p>currentTime2：{{currentTime2}}</p>
</div>

重点：属性是存值的，有新的值进来才会改变，不然就跟缓存一样，我们来看这个：

解释一下：

1.在1、2当中我们可以看出，一个是方法一个是属性，属性用方法来调用肯定是不行的。

2.在1、3当中我们可以看出，方法调用的值一直在变，但是属性调用的值没有改变这就跟他是缓存机制一样

3.在3、4、5当中我们就可以看出，当我们一旦改变了函数当中的值，就相当于改变了缓存中的值，那么他就会刷新值。

总结

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来。采用计算机属性可以很方便做到这一点。计算机属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。-----小伙伴们明白了吗？

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue中的计算属性实例详解

    vue中的计算属性实例详解

    什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 计算属性(computed)用于处理复杂逻辑 computed:{ } compu

  • vue计算属性及使用详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理.  二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调

  • Vue.js中的计算属性、监视属性与生命周期详解

    Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • 详解Vue之计算属性

    模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护 什么是计算属性 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如 <div> {{text.split(',').reverse().join(',')}} </div>. 这里表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以用计算属性进行改写: <div id="Calculat

  • 详解vue2.0监听属性的使用心得及搭配计算属性的使用

    我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type

  • Vue之计算属性详解

    Vue之计算属性详解

    1.何为计算属性:大白话讲就是计算出来的结果保存在属性当中,可以想象为缓存. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--注意了同志们是curr

  • VUE 组件的计算属性详解

    VUE 组件的计算属性详解

    目录 前言 计算属性 总结 前言 今天也是元气满满的一天,今天整理一下VUE组件的计算属性!~~ 开始我们的学习之旅 计算属性 先引用一张图 来看一下计算属性之间的关联: 注意: methods和computed里的东西不能重名 method:定义方法,调用方法使用currentTime(),需要带括号 computed:定义计算属性,调用属性使用currenTime2,不需要带括号:this.message是为了能够让currentTime2观察到数据变化 如何在方法中的值发生了变化,则缓存就

  • vue的mixins属性详解

    首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性. 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from 'vuex' export const playlistMixin = { computed: { ...m

  • Vue之ref属性详解

    Vue之ref属性详解

    总结 本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

  • 使用Vue逐步实现Watch属性详解

    使用Vue逐步实现Watch属性详解

    目录 watch 初始化watch deep.immdediate属性 结语 watch 对于watch的用法,在Vue文档 中有详细描述,它可以让我们观察data中属性的变化.并提供了一个回调函数,可以让用户在属性值变化后做一些事情. watch对象中的value分别支持函数.数组.字符串.对象,较为常用的是函数的方式,当想要观察一个对象以及对象中的每一个属性的变化时,便会用到对象的方式. 下面是官方的一个例子,相信在看完之后就能对watch的几种用法有大概的了解: var vm = new

  • Vue中props的详解

    Vue中props的详解

    看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数据的唯一接口. 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号). 子组件不能直接在模板里面渲染父元素的数据. 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据.然后在模板里渲染这个变量(前面的a),这时候渲染

  • Vue生命周期区别详解

    Vue生命周期区别详解

    生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因

  • Vue Router应用方法详解

    目录 服务端路由 路由的应用场景 路由 监听浏览器 hashchange 事件实现路由 使用Vue Router+Vue2实现路由 服务端路由 服务端路由时指的是服务器根据用户访问的 URL 路径返回不同的响应结果. 在传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML页面,然后重新加载整个页面. 然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,无需重新加载的情况下更新当前页面. 这样通常可以带来更顺滑的用户体验

  • vue全局数据管理示例详解

    目录 记账页面标签页面新增 将API封装到window 用computed计算属性 记账页面标签页面新增 记账页面和标签页面都可以新增标签.可是现在有一个bug.在标签页面新增标签之后,在记账页面不会自动同步,要刷新一下才能同步. 这是因为这两个页面的数据tagList都是分别从tagListModel里fetch的.所以就导致了数据不同步. 解决方案:在更高一层的地方统一去tagListModel里fetch一次,把取出来的设成一个全局的属性,然后分别在两个页面直接使用. 我们选择在main.

随机推荐