Vuejs：数据属性更改时组件不会重新渲染答案

【问题标题】：Vuejs : Component not Re-rendering when a data property changesVuejs：数据属性更改时组件不会重新渲染
【发布时间】：2020-12-25 19:42:39
【问题描述】：

我有一个布尔类型的属性——websiteHasCode，它从存储中获取一个值。我想使用 websiteHasCode （ true 或 false ）有条件地在页面中呈现 html ，最初组件 A 很好（ websiteHasCode 的正确值）。页面中有一个modal，它是组件A的子组件B，modal具有更新存储值的功能——isCodeActive。所以当它更新时，我希望变量 websiteHasCode 也更新并最终更新 Dom，所以我使用了一个观察者并按照this SO question 计算，但它似乎没有更新。谁能帮助我在这里做错了什么？

<template> 
  <div>
    <div v-if="websiteHasCode">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>


<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean,
            }
        },
        mounted() {
            this.websiteHasCode = this.$store.state.isCodeActive;
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
        watch: {
          isCodeActive: {
            handler() {
              console.log(this.websiteHasCode) // returns false
              this.websiteHasCode = this.$store.state.isCodeActive;
              console.log(this.websiteHasCode) // returns true but dom does not re-render
            },
            deep: true
          },
        },
      }
</script>

这也是观察状态变化的最好方法，有没有更好的方法？

【问题讨论】：

我不确定我是否理解您想要做什么。也许这会有所帮助。$forceUpdate() 如果没有，如果您将代码添加到 codePen 将会对我有所帮助
像<div v-if="isCodeActive">一样直接使用isCodeActive怎么样？
另外你应该在data函数中初始化websiteHasCode属性
@Sphinx 你的意思是像 v-if="$store.state.isCodeActive" 吗？它的价值对吗？
@theFrontEndDev 没问题！我认为 Sphinx 意味着您应该直接使用您在 v-if 中声明为 isCodeActive 的计算属性。

标签： javascript vue.js state vuex

【解决方案1】：

除非你想根据 isCodeActive 的值做其他事情，否则没有必要为计算使用观察器，只需像这样直接在你的 v-if 中使用计算：

<template> 
  <div>
    <div v-if="isCodeActive">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>
    

<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false
            }
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
      }
</script>

此外，您将 websiteHasCode 属性初始化为“布尔”而不是 false。可能是 vue 将其视为真实值，因此不会更新布局。

【讨论】：