「computed」 是vue中提供的一个计算属性。它被混入到vue实例中，所有的getter和setter的this上下文自动的绑定为vue实例。计算属性的结果会被缓存，除非依赖的响应式property变化才会从新计算。
我们可以使用 「computed」 对已有的属性数据进行加工处理，得到我们的目标数据。
在 「vue-class-component」 中分别为props，watch等提供了对应的装饰器，而 「computed」 却没有对应的装饰器提供。
在官网的实例中，「computed」 的功能是通过 「get」 实现的。
<template>
? <input v-model="name">
</template>
?
<script>
import vue from 'vue'
import component from 'vue-class-component'
?
@component
export default class helloworld extends vue {
? firstname = 'john'
? lastname = 'doe'
?
? // declared as computed property getter
? get name() {
? ? return this.firstname + ' ' + this.lastname
? }
?
? // declared as computed property setter
? set name(value) {
? ? const splitted = value.split(' ')
? ? this.firstname = splitted[0]
? ? this.lastname = splitted[1] || ''
? }
}
</script>在实际项目中，将组件修改为typescript后，使用 get 实现计算属性，浏览器控制台提示data是非响应式的，数据无法显示。组件js版
<template> ? <el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectchange"> ? ? <el-table-column type="selection" width="55"></el-table-column> ? ? <el-table-column prop="code" label="编码"></el-table-column> ? ? <el-table-column prop="name" label="名称"></el-table-column> ? </el-table> </template>
<script>
export default {
? name: 'hierarchy-table',
? props: {
? ? value: {
? ? ? type: array,
? ? ? required: true
? ? },
? ? skipcodes: {
? ? ? type: array
? ? }
? },
? data() {
? ? return {
? ? };
? },
? computed: {
? ? data() {
? ? ? return this.skipcodes ? this.value.filter(it => !this.skipcodes.includes(it.code)) : this.value;
? ? }
? },
? methods: {
? ? selectchange(selection) {
? ? ? this.$emit('selection-change', selection);
? ? }
? }
};
</script>鉴于这个问题，使用创建中间变量的方式进行解决。组件ts版
<template> ? <el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectchange"> ? ? <el-table-column type="selection" width="55"></el-table-column> ? ? <el-table-column prop="code" label="编码"></el-table-column> ? ? <el-table-column prop="name" label="名称"></el-table-column> ? </el-table> </template>
<script lang="ts">
import { component, prop, vue, watch } from 'vue-property-decorator';
?
@component
export default class hierarchytable extends vue {
? data: any[] = [];
?
? @prop({ type: array, required: true }) value!: any;
? @prop({ type: array }) skipcodes: any;
?
? @watch('value')
? valuechanged(val) {
? ? this.updatedata();
? }
?
? @watch('skipcodes')
? skipcodeschanged() {
? ? this.updatedata();
? }
?
? updatedata() {
? ? this.data = this.skipcodes ? this.value.filter(it => !this.skipcodes.includes(it.code)) : this.value;
? }
?
? selectchange(selection) {
? ? this.$emit('selection-change', selection);
? }
}
</script>
?
<style scoped></style>最近面试中，遇到一个小伙子，谈到了vue中的computed和watch区别，最后得到了一个让我瞠目结舌的答案，只用watch，从不用computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解 — from vue计算属性
讨论 computed 和 watch 之间的区别前，我们先看下 computed 和 methods 有何区别？
理论上，computed 所有实现可以使用 methods 完全替换。
<p>reversed message: "{{ reversedmessage() }}"</p>
<p>reversed message: "{{ reversedmessage }}"</p>
// 计算属性
computed: {
reversedmessage () {
return this.message.split('').reverse().join('')
}
}
// 方法
methods: {
reversedmessage: function () {
return this.message.split('').reverse().join('')
}
}
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedmessage计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法却会执行。
这也同样意味着下面的计算属性将不再更新，因为 date.now() 不是响应式依赖：
computed: {
now: function () {
return date.now()
}
}
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 a，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 a 。如果没有缓存，我们将不可避免的多次执行 a 的 getter！如果你不希望有缓存，请用方法来替代。
相同之处： computed 和 methods 将被混入到 vue 实例中。vm.reversedmessage/vm.reversedmessage() 即可获取相关计算属性/方法。
接下来，看下 computed 和 watch 有何区别？
vue 提供了一种更通用的方式来观察和响应 vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
当需要在数据变化时执行异步或开销较大的操作时， watch 方式是最有用的。其允许我们执行异步操作 (访问一个 api)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
methods: {
getanswer: function () {
this.answer = 'thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'error! could not reach the api. ' + error
})
}
},
created: function () {
// debounce 反弹函数
this.debouncedgetanswer = _.debounce(this.getanswer, 500)
}
这样来看，watch 完全可以替代 computed ？什么情况下，只能使用computed呢？
回顾 computed 最大特点就是缓存，所以上述问题可以转换为：哪些情况下，我们需要依赖缓存？
示例：父组件给子组件传值，值的类型为引用类型
父组件
<template>
<div>
<child :user="user"></child>
<label for="user">parent：</label>
<input id="user" type="text" v-model="user.name">
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
user: { name: 'ligang' }
}
},
components: { child }
}
</script>
子组件
<template>
<div>child: {{user}}</div>
</template>
<script>
export default {
name: 'child',
props: ['user']
}
</script>
现在有这样一个需求，子组件中需要同时显示改变前和改变后的值。
so easy，只需要在 watch 中保存 oldval 即可。
<template>
<div>
<div>child:</div>
<div>修改前：{{olduser}} 修改后：{{user}}</div>
</div>
</template>
<script>
export default {
name: 'child',
props: ['user'],
data () {
return {
olduser: {}
}
},
watch: {
user: {
handler (val, oldval) {
this.olduser = oldval || val
},
deep: true,
immediate: true
}
}
}
</script>
查看结果，wtf，啥情况~~
问题在于，user为引用类型，且 watch 没有做缓存，导致了修改的是同一个对象，所以，watch 方法中**val === olval is true！！**
如何达到要求呢，这里我们就可以借用 computed 缓存的特性，来完成上述情况。
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。 — vue-computed-api
<template>
<div>
<div>child:</div>
<div>修改前：{{olduser}} 修改后：{{user}}</div>
</div>
</template>
<script>
export default {
name: 'child',
props: ['user'],
data () {
return {
olduser: {}
}
},
// 缓存 userinfo
computed: {
userinfo () {
return { ...this.user }
}
},
watch: {
userinfo: {
handler (val, oldval) {
this.olduser = oldval || val
},
deep: true,
immediate: true
}
}
}
</script>
需要注意：{ ...this.user } 或者使用 object.assign({}, this.user) 来创建新的引用！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本教程网。
