乘风原创程序

  • Vue+TypeScript中处理computed方式
  • 2022/4/1 14:29:12
  • 什么是 「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'
    ?
    @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正确使用方式 

    最近面试中,遇到一个小伙子,谈到了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) 来创建新的引用!

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。