Vue+TypeScript中处理computed的方式是什么

今天小编给大家分享一下Vue+typescript中处理computed的方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

什么是 「computed」

「computed」 是Vue中提供的一个计算属性。它被混入到Vue实例中，所有的getter和setter的this上下文自动的绑定为Vue实例。计算属性的结果会被缓存，除非依赖的响应式property变化才会从新计算。

「computed」 的用途

我们可以使用 「computed」 对已有的属性数据进行加工处理，得到我们的目标数据。

在TypeScript怎么用

在 「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' @Componentexport 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"  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"  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'; @Componentexport 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正确使用方式 

最近面试中，遇到一个小伙子，谈到了vue中的computed和watch区别，最后得到了一个让我瞠目结舌的答案，只用watch，从不用computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解 — from Vue计算属性

讨论 computed 和 watch 之间的区别前，我们先看下 computed 和 methods 有何区别？

computed or 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 有何区别？

computed or 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) 来创建新的引用！

以上就是“Vue+TypeScript中处理computed的方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。