有什么方法可以监视UI中的状态变化吗？
例如，在我的数据组件中，我有一个名为loggedIn的变量。如果loggedIn的值等于false，则我希望标题显示Login链接。同样，如果loggedIn的值等于true，则我希望标题显示Logout链接。到目前为止，我已经尝试过：
<li v-if="loggedIn"><a v-link="{ path: 'login' }" v-on:click="logout()">Logout</a></li>
<li v-else><a v-link="{ path: 'login' }">Login</a></li>
data: function () {
return {
loggedIn: this.isLoggedIn() //this method returns true/false
}
},
这样的代码具有预期的效果。但是，仅在刷新组件后才能使用。我希望
Login/Logout的值更改时相应地呈现…有人可以帮忙吗？提前致谢！
最佳答案
更新我刚刚意识到this.isLoggedIn是组件中的方法，而不是它之外的方法。看来您应该将isLoggedIn设为computed并在指令中使用它。
是的，您可以在UI中监视状态更改，但是Vue无法。 Vue不知道UI整体存在。它只知道您所讲述的内容（通常通过指令）。
在示例代码中，将loggedIn初始化为函数的输出，但是在初始化之后，其值永远不会更改。对于ViewModel之外的东西，没有$watch。
大概有一些登录过程，其中UI状态发生了变化。由于ViewModel的目的是为应用程序建模，因此您应该实现
在ViewModel中作为method登录过程。它要做的事情之一就是更改loggedIn变量的值。通常，UI状态应由data成员表示，并且更改UI状态的任何内容都应实现为method。
登录可能是在此组件的父树上进行的。在这种情况下，loggedIn应该作为prop进入。