Vue入门【三】-- 详解computed计算属性

目录

computed:

         ♡ ‧₊˚ 基本使用 ‧₊˚ ♡

♡ ‧₊˚语法‧₊˚ ♡

♡ ‧₊˚效果‧₊˚ ♡

♡ ‧₊˚ 面试问点 ‧₊˚ ♡

computed与methods的区别：

 computed与watch的区别：

---

 

computed:

首先我们要知道computed计算属性是什么，在vue.js的官方文档中是这样解释的：

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

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

所以 computed计算属性 就是用来处理复杂逻辑的，注意：是建议/可以，而不是必须使用。

 ♡ ‧₊˚ 基本使用 ‧₊˚ ♡

  
    
    
    
    
    
  
  
    
  

		5
	
    
  

♡ ‧₊˚语法‧₊˚ ♡

// 语法
	computed: {
		计算属性名 () {
			return 值
		}
	}

♡ ‧₊˚效果‧₊˚ ♡

 且当input输入框内的数字发生变化时，下方的total值也会随之发送改变。

 ♡ ‧₊˚ 面试问点 ‧₊˚ ♡

• computed与methods的区别：

        计算属性有依赖缓存 如果值没有发生变化是不会重新调用计算属性

        methods没有缓存 每一个调用都会重新执行/渲染 发送异步请求

        计算属性不处理异步请求

实例：

	
	
	
	
	


	

		{{total}}
		{{total}}
		{{total}}
		{{total}}
		{{str()}}
		{{str()}}
		{{str()}}
		{{str()}}
	
	

可以看到“计算属性”只打印了一次，而“方法”打印了四次， 因此得知：计算属性基于依赖项的值进行缓存，只要依赖的变量不变，都直接从缓存取结果，不再重新调用计算属性。

•  computed与watch的区别：

相同点是都可以实现通过监控data数据域中属性值的变化来触发相应的回调函数，进而实现我们特殊的逻辑业务处理功能。

1. computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）；

2. computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调 ；

3. 使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框。