Vue JS -根据属性的值使用数据或计算属性。被变异的道具："page“

在Vue.js中，props 是父组件向子组件传递数据的一种方式。根据 props 的值来决定使用数据还是计算属性，通常是为了实现更灵活的组件逻辑。以下是一些基础概念和相关信息：

基础概念

Props: 父组件传递给子组件的数据。
Data: 组件内部的状态，可以通过 data 函数返回一个对象来定义。
Computed Properties: 基于组件的响应式依赖进行缓存计算的属性。

优势

灵活性: 根据不同的 props 值动态选择使用数据还是计算属性，可以使组件更加灵活和可复用。
性能优化: 计算属性具有缓存机制，只有在依赖发生变化时才会重新计算，可以提高性能。

类型

简单类型: 如字符串、数字、布尔值等。
复杂类型: 如对象、数组等。

应用场景

当组件需要根据外部传入的数据来决定内部状态时。
当需要根据某些条件来决定是否进行复杂的计算时。

示例代码

假设我们有一个组件，它接收一个 page 属性，并根据这个属性的值来决定使用数据还是计算属性。

<template>
  <div>
    <p>Page Content: {{ pageContent }}</p>
  </div>
</template>

<script>
export default {
  props: {
    page: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      staticContent: 'This is static content.'
    };
  },
  computed: {
    dynamicContent() {
      // 假设这里有一些复杂的逻辑
      return `Dynamic content for page: ${this.page}`;
    },
    pageContent() {
      // 根据 page 的值决定使用 data 还是 computed property
      return this.page === 'static' ? this.staticContent : this.dynamicContent;
    }
  }
};
</script>

遇到的问题及解决方法

问题：为什么 `page` 属性被变异了？

在Vue.js中，props 应该被视为只读的。如果你发现 page 属性被变异了，可能是因为在子组件内部直接修改了 props。

原因

直接修改 props 是不推荐的，因为这违反了单向数据流的原则。
Vue.js 在开发模式下会给出警告，提示你不应该修改 props。

解决方法

使用本地数据: 如果需要修改 props 的值，可以在子组件内部使用 data 或 computed 属性来创建一个本地副本。

<script>
export default {
  props: ['page'],
  data() {
    return {
      localPage: this.page
    };
  },
  watch: {
    page(newVal) {
      this.localPage = newVal;
    }
  }
};
</script>

使用事件: 如果需要通知父组件更新 props 的值，可以通过 $emit 触发一个事件。

<script>
export default {
  props: ['page'],
  methods: {
    updatePage(newPage) {
      this.$emit('update:page', newPage);
    }
  }
};
</script>

在父组件中监听这个事件并更新 page 的值：

<template>
  <child-component :page.sync="currentPage" />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 'home'
    };
  }
};
</script>

通过这种方式，可以避免直接修改 props，同时保持组件之间的数据流清晰和可维护。