初学Vue遇到的计算属性不刷新的问题 |
您所在的位置：网站首页 › vue计算属性传参返回true › 初学Vue遇到的计算属性不刷新的问题 |
初学Vue遇到的计算属性不刷新的问题
|
项目场景：
Vuex中定义了一个列表，在组件中想要读取列表数据进行展示，其中选择按钮的是否选中取决去对象中的check属性 问题描述： 组件内动态绑定class，采用了计算属性去返回true或者flase，添加点击事件，当点击div时对Vuex中对应的布尔值取反。但实际运行只有第一次加载页面时能正常显示，之后无法正常切换，在点击事件中打印CartList[index].check却能正常切换true，flase 后来将计算属性依赖于data时点击可以正常切换，通过搜索了解到计算属性是依赖于data属性中的数据存在的，只有data数据变化，computed数据才会变化，视图才会更新 computed:{ isCheck() { return (index) => { return this.$store.state.CartList[index].check } }, methods: { click(index) { this.$store.commit('editCheck',index) } }2. 好，现在在data中定义dCartList指向Vuex中的CartList，把computed改为依赖data，运行，视图仍然无法更新，打印dCartList发现check属性同样能正常切换，在methods中主动调用computed也无效。数据能正常改变，但页面不刷新，只有在编辑器中代码有改动发生热更新时会正常显示一次 data() { return { dCartList:this.$store.state.CartList, } }, computed:{ isCheck() { return (index) => { return this.dcartList[index].check } },3. 然后又去了解了一下响应式原理，data已经添加过了，问题没有解决，事实上在点击事件中commit的事件的确是使用Vue.set()做的更改 所以最后使用了Object.assign()返回一个新的对象。运行，仍任无效。。
4. 添加断点后发现，data中数据发生变化时，computed并没有暂停，这就离谱了，直接用defineProperty添加get和set，在点击事件触发时能正常打印被修改和被读取，既然修改后的值被读取了为什么class不能绑定上去，一定要热更新才能绑定 Object.defineProperty(CartList, "check", { get: function() { console.log('被读取了'); }, set: function(y) { console.log('被修改了');} });5. 最后添加了一个计算属性ab，在template中调用了一下{{ab}}，一切正常了。。。点击后页面能正常更改，但如果删掉ab这个不知道有什么用的属性就又回到老问题 data() { return { aaa:true, dcartList:this.$store.state.cartList, } }, props: { cartList: { type: Array, default: [], }, }, computed:{ isCheck() { return (index) => { return this.dcartList[index].check } }, ab() { return this.aaa } },其实可以换一种方式完成这个功能，将点击勾选的功能抽离成组件，遍历时传入check属性可以避免取值的问题 或者在data中创建一个保存所有check的列表，直接修改这个列表也能避免 但是已经遇到了不刷新这个问题，搞不明白实在难受 原因分析：计算属性是依赖于data属性中的数据存在的，只有data依赖中的数据变化，computed数据才会变化，视图才会更新 新添加的属性不会添加geter和seter，使用Object.assign()添加属性覆盖原对象 解决方案：使用Object.assign()添加属性覆盖原对象，无效的话停掉项目再启动 （仍然搞不懂的是，为什么调用另一个无关的计算属性就可以运行） |
【本文地址】
今日新闻 |
推荐新闻 |