Vue.js 计算属性中访问数据：告别 undefined 困扰

vue.js

2024-03-05 01:49:45

从 Vue.js 计算属性访问数据：巧妙解决困扰

问题探究

Vue.js 的计算属性旨在根据响应式数据派生新的属性。然而，当你尝试在计算属性中直接访问数据中的变量时，往往会遇到令人抓狂的 undefined 错误。

幕后根源

计算属性是在一个独立于组件实例的上下文中执行的。因此，它无法直接访问组件实例的 data 属性。需要使用 this 代理对象来弥合这一鸿沟。

巧妙解决方案

要解决这个问题，需要在计算属性中使用 this 代理对象：

在 data 中定义变量：

data() {
  return {
    lang: 'sp'
  }
}

在计算属性中使用 this：

computed: {
  langEn() {
    return this.lang === 'en'
  },
  langSp() {
    return this.lang === 'sp'
  }
}

现在，计算属性可以成功访问 data 中的变量，并返回正确的值。

贴心提示

使用箭头函数来自动绑定 this。
对于嵌套的计算属性，每一层都需要使用 this。
在 TypeScript 中，需要指定正确的类型。

实践演示

<template>
  <div>
    <p>Current language: {{ lang }}</p>
    <p>Is language English? {{ langEn }}</p>
    <p>Is language Spanish? {{ langSp }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lang: 'sp'
    }
  },
  computed: {
    langEn() {
      return this.lang === 'en'
    },
    langSp() {
      return this.lang === 'sp'
    }
  }
}
</script>