Vue开发应用中遇到的问题与总结

发表于 更新于 分类于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟
在实际开发中遇到的一些Vue问题与总结。

1 data 与 computed 区别

data，详见

computed，详见

data 中不能使用 computed 中的数据, computed 中可以使用 data 数据

归根结底就是一个 Vue 实例在渲染的时候数据解析的顺序问题。官方 v2.6.14 版本源码，详见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// props -> methods -> data -> computed -> watch
export function initState(vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe((vm._data = {}), true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

! 注意

以上代码的执行顺序，并非是 Vue 风格指南中组件/实例的选项的顺序

2 vuex 中 mapState 辅助函数

用法详见

mapState 函数返回的是一个对象，结合 ES6 的扩展运算符，就能自动实现 computed 中的多个计算属性加入，减少手动一个个的去写。

1
2
3
4
5
6
7
8
computed: {
  localComputed () { /* ... */ },

  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

使用对象展开运算符将此对象混入到外部对象中，这句话就很关键。

另外，mapGetters，mapActions，mapMutations 与 mapState 的用法有着异曲同工之妙。

3 vuex中Modules命名空间理解

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。用法详见

! 注意

在没有 namespaced: true 指明的模块中，除了 action、mutation 和 getter，其它都是局部的，state 是局部的。

对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState，这也是为什么 action 的参数不用store实例本身，而是 context 上下文。

相关链接

[1] Vue data 与 computed 的区别

[2] 理解 Vuex 的辅助函数 mapState, mapActions, mapMutations 用法