Vue中计算属性和监听属性如何实现及区别详解？

本文共计1447个文字，预计阅读时间需要6分钟。

目录

一、computed计算属性

（1）计算属性的缓存（2）计算属性的setter

二、watch监听属性

（1）computed计算属性的Vue.js模板表达式优势（2）设计初衷是用于简单运算

目录

• 一、computed计算属性
• （1）计算属性的缓存
• （2）计算属性的setter
• 二、watch监听属性

一、computed计算属性

Vue.js模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板内放入过长的或复杂的逻辑时，会让模板过重且难以维护。Vue.js框架提倡使用计算属性，在一个计算属性可以完成各种复杂的逻辑，包括逻辑运算、函数调用等，只要最终返回一个结果就可以。在Vue.js框架中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。