Vue computed 计算属性

<template>
    <div id="app">
        <div>{{reverseTitle}}</div>
        <div>{{reverseTitle2()}}</div>
        <button @click="add()">补充货物1</button>
        <div>总价为:{{price}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            package1: {
                count: 5,
                price: 5
            },
            package2: {
                count: 10,
                price: 10
            },
            title: 'Hello Vue!!!'
        }
    },
    computed: {
        price(){
            return this.package1.count*this.package1.price+this.package2.count*this.package2.price  //总价随着货物或价格的改变会重新计算
        },
        reverseTitle(){//计算属性里面的方法,只要引用值没发生变化,那么就不会执行该方法
            console.log('我执行了reverseTitle方法')
            return this.title.split('').reverse().join('')
        }
    },
    methods: {   //对象的方法
        add(){
            this.package1.count++
            this.package2.count++
        },
        reverseTitle2(){//每次页面渲染时就会执行该方法
            console.log('我执行了reverseTitle2方法:', this.title)
            return this.title.split('').reverse().join('')
        }
    }
}
</script>

总结:
1.computed 在第一次引用,或引用值改变时才会触发里面的方法(缓存,减少不必要的反复计算)
2.在methods 里面的方法会在页面渲染更新时反复调用(耗费大量性能)
3.使用computed 定义方法后 可以在模板中直接用方法名得到结果 而不需要像methods 这样()使用(方便调用)

原文地址:https://www.cnblogs.com/yzyh/p/10159166.html

时间: 2024-10-10 09:08:55

Vue computed 计算属性的相关文章

Vue computed计算属性 理解

1.computed里面的函数建议有返回值,不建议去修改data中的属性 2.在使用computed中的方法时,不需要加() 3.computed是基于vue的依赖 当computed所依赖的属性发生改变的时候就会触发相对应的方法 4.当computed中的函数执行完毕后,会进行缓存.当下次所依赖的属性没有发生改变的时候会从缓存中读取结果 特点: 一个属性受多个属性的影响 原文地址:https://www.cnblogs.com/yaoyao-/p/10898952.html

vue(六)--计算属性(computed)

计算属性关键词: computed demo1: <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Ambbq!' }, computed: { // 计算属性的

vue的计算属性

在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中的数据发生变化时.所有依赖计算属性中的函数也会更新.而且最妙的是,我们已经以声明的方式创建了这种依赖关系:计算属性的getter是没有副作用的,这使得它易于推理和测试. 1,计算属性与methods 我们将同一函数定义为method,而不是一个计算属性,得到的结果都是一样的.然而两者的不同:计算属性

Vue.js 计算属性

Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8"> <title>computed</title> <script src="vue.min.js"></script> </head> <body> <div id="app"

VUE:计算属性和监视

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.计算属性: 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2.监视属性: 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时,回调函数自

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

Vue中计算属性

一般情况下属性都是放在data中的,但是有些属性可能是需要经过一些计算才能得出,那么,我们可以把这类属性变成计算属性.此时,需要将这些计算属性写到computed中,和将属性写在data中是一样的.表面上看,计算属性和methods一样,实际上,计算属性更加智能,他是基于它们的响应式依赖进行缓存的.也就是说,只要相关依赖(比如下面的例子中的“area”)没有发生变化,那么这个计算属性的函数就不会重新执行,而是直接返回之前的值.这个缓存功能使计算属性访问起来更高效. 计算属性set: set方法是

vue的computed计算属性:

示例一: 注意此处计算属性里面的b指的是属性,不是方法,其默认调用的是计算属性里的get方法,且其值取决于get方法里面return出的返回值. 此处的方法就是如下示例二里面默认的get方法,当页面点击之前,a的值为1,b的值为this.a+1,即1+1为2:当点击页面之后,vm.a=101,即a的值为101,此时b的值再次由其默认调用的get方法返回,即this.a+1,为102 . 示例二: 当页面点击之前,a的值为1,b的值由get方法内返回,即this.a+2为3:当页面点击之后,b的值