computed vue 不 触发_vue.js - 获取 vuex state 中的值一定要使用 computed 而不能使用 data 吗？...

问 题

回答者提到：

data是有缓存的，一旦Vuex中值改变了，没法做到响应。

而放在computed中，虽然也有缓存，但会自动监视依赖。

请问什么叫自动监视依赖呢？

记得 Vue 官方文档中提到过几种不会触发更新检测的情况，其中包括直接修改对象的属性。还提到这时需要用 Vue.set() 进行修改。

是不是形如以下方式：

data(){

return {

topicList: this.$store.state.topicList

}

},

会导致 topicList 不会因 Vuex 中管理的 state.topicList 的修改而变化。

而：

computed:{

topicList(){

return this.$store.state.topicList

}

}

}

这种方式会监听 state 中 topicList 的变化呢？

解决方案

这明显是回答者自己没搞懂而生造的概念。

data 中的内容只会在 created 钩子触发前初始化一次，类似于你直接写 const data = { foo: 123 } 这样，这时属性的值是纯粹的字面量，而不是回答者所谓的【缓存】(没有 Cache Miss 哪来的缓存？)。JS 字面量赋值后显然不会自动更新。最简单的例子：

let b = 'xxx'

let a = b

b = 'xyz' // 这时对于原始类型，a 肯定还是 'xxx'

换句话说，data 中内容依赖变更时，data 属性不会变更(它的设计目标就是保存组件的局部状态数据而已)。而 computed 则是通过【依赖追踪】实现的，在 computed 求值时引用的 Vue 变量变化时，会触发对 computed 的重新计算。

所以你可以使用 computed 去引用 Vuex 状态变量，从而使得依赖追踪生效。或者，将 Vuex 状态变量通过 mapStateToComputed 映射为 computed 也是一个很方便的选择。

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起