Vue的计算属性

模板中写表达式虽然方便，但是也只能用来做简单的操作。如果在模板中写太多的逻辑，会让模板变得很臃肿，不方便维护。所以推荐使用计算属性来描述依赖响应状态的复杂逻辑。

HTML代码

<template>
  <view>
    <!-- 模板中 -->
    <p>{{ zmkj.user.length > 0 ? 'yes':'no' }}</p>
    <!-- 计算节点中 -->
    <p>{{ zmkj1 }}</p>
    <!-- 函数/方法中 -->
    <p>{{ zmkj2() }}</p>
  </view>
</template>
<template>
  <view>
    <!-- 模板中 -->
    <p>{{ zmkj.user.length > 0 ? 'yes':'no' }}</p>
    <!-- 计算节点中 -->
    <p>{{ zmkj1 }}</p>
    <!-- 函数/方法中 -->
    <p>{{ zmkj2() }}</p>
  </view>
</template>
<template>
	<view>
		<!-- 模板中 -->
		<p>{{ zmkj.user.length > 0 ? 'yes':'no' }}</p>
		<!-- 计算节点中 -->
		<p>{{ zmkj1 }}</p>
		<!-- 函数/方法中 -->
		<p>{{ zmkj2() }}</p>
	</view>
</template>

js代码

<script>
  export default {
    data() {
      return {
        zmkj: {
          name: "造梦空间论坛",
          url: "blog.zmkj.cn",
          user: ["小波", "小虫", "小白"]
        }
      }
    },
    //计算属性
    computed: {
      zmkj1() {
        return this.zmkj.user.length > 0 ? 'yes' : 'no'
      }
    },
    // 函数/方法
    methods: {
      zmkj2() {
        return this.zmkj.user.length > 0 ? 'yes' : 'no'
      }
    }
  }
</script>
<script>
  export default {
    data() {
      return {
        zmkj: {
          name: "造梦空间论坛",
          url: "blog.zmkj.cn",
          user: ["小波", "小虫", "小白"]
        }
      }
    },
    //计算属性
    computed: {
      zmkj1() {
        return this.zmkj.user.length > 0 ? 'yes' : 'no'
      }
    },
    // 函数/方法
    methods: {
      zmkj2() {
        return this.zmkj.user.length > 0 ? 'yes' : 'no'
      }
    }
  }
</script>
<script>
	export default {
		data() {
			return {
				zmkj: {
					name: "造梦空间论坛",
					url: "blog.zmkj.cn",
					user: ["小波", "小虫", "小白"]
				}
			}
		},
		//计算属性
		computed: {
			zmkj1() {
				return this.zmkj.user.length > 0 ? 'yes' : 'no'
			}
		},
		// 函数/方法
		methods: {
			zmkj2() {
				return this.zmkj.user.length > 0 ? 'yes' : 'no'
			}
		}
	}
</script>

都是判断zmkj.user里面是否有数据，最后返回结果都是yes。

模板中

这样能实现效果，但是算法复杂了那就会堆积一堆代码，很不方便维护。使用计算属性可以使代码更简洁、可读性更高。

计算属性中

方便维护。

计算属性缓存和函数、方法的区别

我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果，但是他们也是有区别的。

计算属性: 计算属性值会基于其响应式依赖被缓存
方法:方法调用总是会在重渲染发生时再次执行函数

总的来说就是：计算属性在响应式(return this.zmkj.user.length > 0 ? 'yes' : 'no')更新时才会自动更新，并且在依赖属性发生变化时自动更新而方法是每次调用都会更新；我们调用100次计算属性的，他也只计算一次，但是调用100次函数的，却会计算100次。