<!DOCTYPE html>

<html>

<head>

    <script src="https://unpkg.com/vue@2.4.2"></script>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <div id="app-6">

        <p v-once v-if="see">{{ message }}</p>

        <p   v-if="see">{{ reversedMessage  }}</p>

        <p v-if="see">{{ reversedMessages()  }}</p>

        <input  v-model="message">

        <ol>

            <todo-item

                       v-for="item in groceryList"

                       v-bind:todo="item"

                       v-bind:key="item.id"

                       ></todo-item>

        </ol>

    </div>

</body>

</html>

<script>

    var app6;

    window.onload = function () {

        Vue.component('todo-item', {

            template: '<li>{{todo.text}}</li>',

            props:['todo']

        })

        app6 = new Vue({

            el: '#app-6',

            data: {

                see: true,

                groceryList: [

                    { id: 0, text: '蔬菜' },

                    { id: 1, text: '奶酪' },

                    { id: 2, text: '随便其他什么人吃的东西' }

                ],

                message: 'Hello Vue!'

            },
//计算属性

            computed: {

                reversedMessage: function () {

                    return this.message.split('').reverse().join('')

                }

            },
//方法返回

            methods: {

                reversedMessages: function () {

                    return this.message.split('').reverse().join('')

                }

            }

        })

    }

</script>

　　注意 由于计算属性与method 与data中的属性都是保存在app6这个对象的一级属性里面 所以如果重名 后定义的将会覆盖前定义的对象

官方文档解释两者的差别

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
now: function () {
return Date.now()
}
}

相比而言，只要发生重新渲染，method 调用总会执行该函数。

文档地址 https://cn.vuejs.org/v2/guide/computed.html

vue.js使用之计算属性与方法返回的差别的更多相关文章

  1. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  2. Vue.js系列之四计算属性和观察者

    一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...

  3. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  4. Vue生命周期，计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

  5. Vue基础练习之计算属性、方法、监听器

    <body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...

  6. vue的计算属性与方法的不同

    计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  7. Vue 计算属性与方法

    computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...

  8. vue计算属性和方法的区别

    计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...

  9. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

随机推荐

  1. 【找规律】【DFS】Gym - 101174H - Pascal's Hyper-Pyramids

    二维下,如果把杨辉三角按照题目里要求的那样摆放,容易发现,第i行第j列的数(从0开始标号)是C(i+j,i)*C(j,j). 高维下也有类似规律,比如三维下,最后一层的数其实是C(i+j+k,i)*C ...

  2. python基础之递归，匿名，内置函数

    递归函数: 什么是递归函数? 函数递归调用:在调用一个函数的过程中,又直接或间接地调用了该函数本身. 递归必须要有两个明确的阶段: ①递推:一层一层递归调用下去,强调:每进入下一层问题规模减少 ②回溯 ...

  3. 必知必会JVM垃圾回收——对象搜索算法与回收算法

    垃圾回收(GC)是JVM的一大杀器,它使程序员可以更高效地专注于程序的开发设计,而不用过多地考虑对象的创建销毁等操作.但是这并不是说程序员不需要了解GC.GC只是Java编程中一项自动化工具,任何一个 ...

  4. codevs 2185 最长公共上升子序列--nm的一维求法

    2185 最长公共上升子序列  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond 题目描述 Description 熊大妈的奶牛在小沐沐的熏陶下开始研究信息题目 ...

  5. （转）Hadoop系列－IPC模型

    学习笔记Mark IPC 实现RPC的一种方法,具有快速.简单的特点. 它不像Sun公司提供的标准RPC包,基于Java序列化. IPC无需创建网络stubs和skeletons. IPC中的方法调用 ...

  6. XMPP资源绑定(Resource Binding)与单台设备登录控制

    原文:http://blog.csdn.net/brasbug/article/details/26353511 一个XMPP的账号由三部分组成: 用户名(user/node),域名(domain)和 ...

  7. Android内存优化5 了解java GC 垃圾回收机制3

    引言 接App优化之内存优化(序), 作为App优化系列中内存优化的一个小部分. 由于内存相关知识比较生涩, 内存优化中使用到的相关工具, 也有很多专有名词. 对Java内存管理, GC, Andro ...

  8. mysql将字符串字段转为数字排序或比大小

    SELECT * FROM Student WHERE 1 = 1 ORDER BY -ID DESC ; SELECT * FROM Student WHERE 1 = 1 ORDER BY (ID ...

  9. ylbtech-LanguageSamples-Delegates(委托)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Delegates(委托) 1.A,示例(Sample) 返回顶部 “委托”示例 本示例 ...

  10. 基于CentOS与VmwareStation10搭建hadoop环境

    基于CentOS与VmwareStation10搭建hadoop环境     目 录 1. 概述.... 1 1.1. 软件准备.... 1 1.2. 硬件准备.... 1 2. 安装与配置虚拟机.. ...