参考，vue 2 中的计算替代方案

Question

我在 Vue 3 中做了一个项目，我使用了 ref 和 computed。然后我意识到我应该在 Vue 2 中做这个项目......现在我得到：“export 'computed' was not found in 'vue' “export 'ref' was not found in 'vue' ...我知道我需要 Vue 3，这就是为什么我想问问是否有其他选择：

这是我使用 ref 和计算的地方：

  import { ref, computed } from "vue";

  export const collapsed = ref(false);
  export const toggleSidebar = () => (collapsed.value = !collapsed.value);

  export const SIDEBAR_WIDTH = 180;
  export const SIDEBAR_WIDTH_COLLAPSED = 38;
  export const sideBarWidth = computed(
    () => `${collapsed.value ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH}px`
  );

这里还有：

  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { collapsed } from './state'

  export default {
    props: {
      to: { type: String, required: true },
      icon: { type: String, required: true }
    },
    setup(props) {
      const route = useRoute()
      const isActive = computed(() => route.path === props.to)
      return { isActive, collapsed }
    }
  }
  </script>

  <template>
      <router-link :to="to" class="link" :class="{ active: isActive }" >

Answer 1

computed 也在 vue 2 中，但是在 vue 2 中你需要使用选项 api :

export default {
  data() {
    return {
      collapsed: false
    }
  },
  computed: {
    toggleSidebar() {
      return this.collapsed.value = !this.collapsed.value
    },
    sideBarWidth() {
      return `${this.collapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH}px`
    }
  }
}

export default {
  props: {
    to: { type: String, required: true },
    icon: { type: String, required: true }
  },
  computed: {
    isActive() {
      return this.$route.path === this.to  
    }
  }
}

Answer 2

Vue 团队为您的场景提供了一个 stand-alone 插件：@vue/composition-api。
它允许在 Vue2 项目中使用 Composition API。

您所要做的就是 install it 并将导入从 vue 更改为 @vue/composition-api。

不仅您不必重构从 Composition API 到 Options API 的所有内容，而且，如果客户决定在未来某个时候切换到 Vue3，他们需要做的就是将导入更改回 vue 就可以了。

参考，vue 2 中的计算替代方案

ref, computed alternatives in vue 2

javascript

vue.js

vuejs2

vuejs3

bootstrap-vue