Nuxt组件中computed与data的区别及相关疑问

嘿，我来帮你把这几个点掰扯清楚，其实核心是理解Vue（Nuxt基于Vue）中这两个选项的设计初衷：

核心区别：data vs computed #

先从本质上区分：

• data：是组件的本地响应式状态仓库，用来存组件自己需要用到的可变（或静态）值。你可以直接修改data里的属性（比如this.dataMessage = 'Hey there!'），它的初始值是通过函数返回的对象来定义的。它的特点是值是主动存储的，除非你手动修改，否则不会自动更新。
• computed：是计算属性，它的值不是主动存储的，而是基于依赖的响应式数据动态计算出来的。比如你代码里的computedMessage依赖Vuex的state.whatever，只要whatever一变，computedMessage会自动重新计算并更新。另外计算属性有缓存机制——如果依赖的数据源没变化，多次访问它会直接返回缓存的结果，不用重复计算，这能提升性能。而且默认情况下，计算属性是只读的，你不能直接改它的值，要改只能去修改它依赖的数据源。

拿你的代码举例子：

• dataMessage是静态字符串，除非你手动修改this.dataMessage，否则它会一直是"Hi there"；
• computedMessage会实时同步$store.state.whatever的变化，只要Vuex里的这个状态更新，页面上的computedMessage就会自动跟着变。

为什么data必须是函数？ #

这是Vue组件的规范要求，核心原因是组件复用：
如果data是一个普通对象，那么所有复用这个组件的实例都会共享同一个对象引用——也就是说，你在一个组件实例里修改data的值，其他复用的组件实例的data也会跟着变，这显然不是我们想要的组件隔离效果。
把data定义成函数后，每次创建组件实例时，都会调用这个函数返回一个全新的对象，这样每个组件实例都有自己独立的状态，互相不会干扰。哪怕你的data是完全静态的，也得遵循这个规则，这是组件设计的基础要求。

想使用process.env应该放在哪里？ #

process.env里的环境变量一般是静态的（构建或运行时就确定了，不会在组件运行过程中变化），所以分两种情况：

• 如果只是单纯把环境变量的值赋值给组件的一个属性，直接放在data里就够了，初始化一次就行：

  data() {
    return {
      appName: process.env.APP_NAME,
      apiBaseUrl: process.env.API_BASE_URL
    }
  }
  

• 如果你需要把环境变量和其他响应式数据结合计算出一个值（比如根据环境变量切换不同的配置，同时结合组件的某个状态），那可以放在computed里，但这种场景其实很少见，因为process.env本身不会动态变化。

总结一下：process.env是静态值，放在data里初始化一次就足够了，没必要用computed。

内容的提问来源于stack exchange，提问作者Augustin Riedinger