vue 计算属性和data_Vue.js教程（五）--Vue的计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。

1. 基础例子

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})

结果： Original message: "Hello" Computed reversed message: "olleH" 这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数。

2.计算属性缓存

计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。

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

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

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

3. 计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

4. 示例

{{msg}}

{{msg2}}

点击改变普通属性值，计算属性也会相应改变

vue 计算属性和data_Vue.js教程（五）--Vue的计算属性相关推荐

vue 父传子_Vue.js教程Vue基本指令
前言本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...
vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
MATLAB数学计算与工程分析范例教程,MATLAB 2016数学计算与工程分析从入门到精通...
全书通过近400个实例讲解了利用MATLAB 2016进行数学计算和工程分析的方法和技巧,涵盖了MATLAB的五大功能:1)数值计算功能:2)符号计算功能:3)图形与数据可视化功能:4)可视化建模与仿 ...
Html的a标签onclick属性,关于通过js给a标签增加onclick属性
var selfw2 = this; //selfw2.loadData(nm); return selfw2.loadData(nm).then(function(){ var cardInstan ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
vue 计算属性和data_Vue:计算属性
一.为什么要使用计算属性 1.什么是计算属性计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
【Vue教程】Vue.js推文
为什么前端工程师的需求这么大我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...

vue 计算属性和data_Vue.js教程（五）--Vue的计算属性

vue 计算属性和data_Vue.js教程（五）--Vue的计算属性相关推荐

最新文章

热门文章