Vue 计算属性与方法
2020-11-20 16:22
621 查看
computed
基本使用
如果数据需要有复杂的计算,则可以在
Vue实例中定义计算属性,再交由
mustache进行渲染。
- computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方法的调用
- computed对象内部的方法如果想调用同一Vue实例下的方法或者属性,可使用this进行调用,Vue内部会通过代理器进行查找
如下所示,我们需要计算书籍的总价格:
<div id="app"> 书籍的总价格是:{{totalPrice}} </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: "#app", data: { books: { "Vue实战": 128, "JavaScrip入门": 99, "HTML5初识": 87, "CSS3": 68, } }, computed: { totalPrice() { return Object.values(this.books).reduce((pre, cur) => { return pre + cur; }, 0) } } }) </script>
计算特性
如果修改了数据源,那么计算属性会重新进行计算,如下所示,书籍总价本来为382,当我们修改其中任意一本书的价格后,书籍总价格也将发生改变:
met ad8 hods
基本使用
methods中定义的方法通常都是搭配事件监听做回调的,虽然我们也可以让它计算书籍的总价格,但这并不是一个明智的选择:
- methods下所定义的方法必须加括号才能完成调用
- methods对象内部的方法如果想调用同一Vue实例下的方法或者属性,可使用this进行调用,Vue内部会通过代理器进行查找
如下实例,用
methods也可以完成书籍总价格的计算,同时它也用于
computed的计算特性:
<body> <div id="app"> 书籍的总价格是:{{totalPrice()}} </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: "#app", data: { books: { "Vue实战": 128, "JavaScrip入门": 99, "HTML5初识": 87, "CSS3": 68, } }, computed: { }, methods:{ totalPrice() { return Object.values(this.books).reduce((pre, cur) => { return pre + cur; }, 0) } } }) </script> </body>
差异区别
缓存特性
computed具有缓存特性,即多次调用只会调用一次,只有当数据源发生改变时才会自行调用一次。
而
methods没有缓存特性,调用几次就执行几次,并且当数据源发生改变时也会自动调用之前的次数。
<body> <div id="app"> {{computedAdd}} {{computedAdd}} {{computedAdd}} <hr> {{methodsAdd()}} {{methodsAdd()}} {{methodsAdd()}} <button type="button">查看各执行几次</button> </div> <script src="./vue.js"></script> <script> let computedCount = 0; let methodsCount = 0; const app = new Vue({ el: "#app", data: { num1: 100, num2: 200, }, computed: { computedAdd() { computedCount++; return this.num1 + this.num2; } }, methods: { methodsAdd() { methodsCount++; return this.num1 + this.num2; } } }) docum 1294 ent.querySelector("button").addEventListener("click", () => { console.log(`computed调用了${computedCount}次`); console.log(`methods调用了${methodsCount}次`); },) </script> </body>
使用建议
计算属性,故名思意,当多个属性通过大量计算才能得到结果时当使用计算属性,因为它具有缓存特性调用次数较少所以性能比使用
methods要高。
你只能调用一次计算属性,剩下的都是被动调用。
方法则是与事件做对应的,所以不应该使用方法来执行对属性的计算,方法具有主动调用的特性,你可以多次进行主动调用,当然它也可以自动调用。
相关文章推荐
- vue 更改计算属性后select选中值不更改的解决方法
- vue-计算属性和方法
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- 【Vue】零基础学习Vue: 第13课 Watch侦听属性、计算属性缓存computed、方法methods的区别
- 自学Vue必看的计算属性知识总结以及计算属性与方法的区别
- Vue计算方法methods和计算属性computed对比
- vue中的计算属性的使用和vue实例的方法示例
- vue 计算属性computed和观察watch 和方法methods
- 关于vue的使用计算属性VS使用计算方法的问题
- Vue中使用方法、计算属性或观察者的方法实例详解
- vue中计算属性与方法的不同之缓存
- Vue计算属性vs方法
- 2_3 Vue 计算属性,方法监听
- Vue 方法与计算属性
- vue的计算属性的set方法--几乎不用,了解就行
- Vue学习笔记3.5 计算属性computed中的 get方法和set方法
- Vue的计算属性computed、方法methods、侦听器watch的区别
- 关闭Vue计算属性自带的缓存功能方法
- vue计算属性的使用和vue实例的方法
- vue计算属性computed的使用方法示例