vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。

而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。

computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。

< div id = "app" > { { fullName } } < / div > < script > var vm = new Vue ( { el : '#app' , data : { firstName : 'wade' , lastName : 'dean' computed : { fullName : function ( ) { return this . firstName + ' ' + this . lastName } ) ; < / script > < / body >

打印效果如下：wade dean

我们可以为计算属性中的fullName设置一个对象，对象里面包含get和set方法：

< div id = "app" > { { fullName } } < / div > < script > var vm = new Vue ( { el : '#app' , data : { firstName : 'wade' , lastName : 'dean' computed : { fullName : { get : function ( ) { console . log ( 'running get function' ) return this . firstName + ' ' + this . lastName set : function ( value ) { console . log ( 'running set function' ) var arr = value . split ( ' ' ) this . firstName = arr [ 0 ] this . lastName = arr [ 1 ] } ) ; < / script > < / body >

程序运行以后控制台打印running get function，说明刚开始调用的是fullName的get方法；
打印效果如下：wade dean

我们在控制台手动修改fullName的值：
vm.fullName = ‘karsa dean’

打印结果：
running set function
running get function
karsa dean’

这时fullName被修改了，于是调用set方法，打印running set function，并且把karsa和dean分别赋值给firstName和lastName，vue检测到计算fullName所依赖的firstName和lastName被修改了，于是重新触发get方法，打印running get function，并且把计算出来的新的fullName的值渲染到页面；

参考原文链接：https://blog.csdn.net/dyw3390199/article/details/112387792

本文实例讲述了 vue 计算属性 get和 set 用法。分享给大家供大家参考，具体如下： 计算属性 是什么： vue 文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。 换句话说，就是可以自己设置 值 （b 值 ），这个 值 和data下定义的 值 （a 值 ）存在某些关系，b的 值 是基于a的 值 ，通过某些逻辑产生出来的 值 ，b 值 可以直接拿到template里去用。当a的 值 发生变化的时候，b的 值 会跟着变化。就是 计算属性 中的默认 值 get。那 set 又是什么鬼？ b的 值 是基于a的变化而变化的，那么直接修改b的 值 的时候，会怎么样？这里会走进 set 方法 里去。 总之一条：b的 值 始终是依赖a的 值 存在和变化的。最后渲染出来的a为100， 上面的代码主要做的是：在拿到数据的时候将后端 10 位时间戳转化为 13 位时间戳，之后再向服务端发送数据的时候再转化回 10 位时间戳传给后端。而且这只是一个最简单的例子，真实的 form 表单会复杂的多，需要处理的数据也更为的多。我们知道前端的时间戳都是 13 位的，但很多后端默认时间戳是 10 位的，这就很尴尬了。大家肯定都用过，它除了可以缓存 计算属性 外，它在处理传入数据和目标数据格式不一致的时候也是很有用的。通过上面的代码可以看到，我们把需要做前后端兼容的数据，放在了 com put ed 中，从。 在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用 计算属性 。 vue 计算属性 当我们想要根据一端业务代码的执行结果来返回属性的 值 ，就可以使用 计算属性 com put ed 了, 计算属性 是一个有结果的函数,有get 方法 和 set 方法 ，get 方法 ，必须有返回 值 必须有返回 值 [remov ed ]</script 1. com put ed 是对⾃⼰定义的变量进⾏监控，这⾥的变量不是在data中定义，直接 在 com put ed 中定义，然后变量放到展⽰页⾯后就实现了数据的双向绑定，当变量发 ⽣改变是就会触发计算，说到这就要说说第⼆点get和 set ⽅法了， 2. com put ed 中有get和 set ⽅法，（在默认的情况下只有get） 1.get⽅法是取，相当于我们可以在get中给这个 计算属性 中的变量赋 值 2. set ⽅法是改变时触发，这⾥的改变指的是当我们在 com put ed 中定义的变量的 值 发⽣改变是，会触发 set ⽅法，这样我们就 vue 的 com put ed 方法 get和 set 详解， com put ed 中get和 set 的栗子（引用官网）， com put ed 与watch的区别， com put ed 与watch的不同点还有相同点，项目中的使用总结。 本文实例讲述了 vue 计算属性 get和 set 用法。分享给大家供大家参考，具体如下： 计算属性 是什么： vue 文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。换句话说，就是可以自己设置 值 (b 值 )，这个 值 和data下定义的 值 (a 值 )存在某些关系，b的 值 是基于a的 值 ，通过某些逻辑产生出来的 值 ，b 值 可以直接拿到template里去用。当a的 值 发生变化的时候，b的 值 会跟着变化。就是 计算属性 中的默认 值 ... 需要使用 com put ed 中的get set 的前提背景： 需要通过input去改变 vue x的 值 时，我们可能会这样写代码： <input v-model="obj.message"> 但是在 vue x严格模式下，这样赋 值 state会导致报错，因此就需要我们 com put ed 中的get set 来改写这个例子了，代码如下： <input v-model="message"> com put ed : { message: { get () { return this.$st