vue.js 的反应性属性问题

Question

我在 Vue.js 应用程序中遇到了一个令人费解的反应属性问题，这可能是我的误解造成的，我希望有人能提供帮助。在我的 App.vue 中，我有 import auth from 'src/auth.js'，在我的数据属性中我有这个：

 data() {
  return {
    authenticated: auth.user.authenticated,
    role: auth.user.role
  }
 },

这个经过身份验证的属性用于显示或隐藏各种菜单项，例如：

<li v-if="!authenticated">
  <router-link to="/login">Log In</router-link>
</li>
<li v-if="authenticated"><a href="#" @click.prevent="logout">Log Out</a></li>

我发现对“auth.user.authenticated”的更改（例如，在成功登录后从 false 切换为 true）没有反映在菜单项的呈现中 - 即经过身份验证的数据属性未更新。为此，我必须在“更新前”和注销方法中使用this.authenticated=auth.user.authenticated 显式更新它。起初我认为这只是在第一次创建时分配而不是随后更新，如果我使用计算属性，这将是动态的，但这也不起作用。显然，我的 App 组件不知道对“身份验证”数据的更改。我怎样才能使更新是自动的？我目前正在使用它，但使用“更新前”感觉就像是一个杂物。

Answer 1

Vue 数据项是响应式的，但非 Vue 数据项不是响应式的。您的代码使用非反应性数据项的值初始化反应性数据项。

Vue 无法观察外部（对于 Vue）变量的变化。您将需要注意您的变量何时更改和tell Vue about it，或者在需要时仅使用外部变量（而不是内部副本）。