javascript - vue的computed怎么使用？

问题描述

问 题

今天看vue2.0的vuex使用方法的视频，发现视频中的代码执行与本地写的代码执行不相同，就是在vue的data中返回一个count,然后在computed方法中将这个数据修改成vuex中的数据，视频中数据一直是vuex的数据，但是本地执行数据一直被data中的数据替换。

以下是视频中执行截图：

下面是本地运行截图:

对比两个图，麻烦对vue2.0熟练的帮忙回答一下下面代码怎么修改才能跟上面得到相同的结果

main.js代码：

store.js代码：

解决方案

首先，不建议使用你这种computed中和data中声明两个同名属性的方式。因为data, computed, method里面的属性都会被代理到vm对象的实例属性上。

关于你的问题。

Vuejs版本不同，内部处理细节不同。

关于实现，我只看了2.0.3和2.2.4的，看这个方法initState
https://github.com/vuejs/vue/...
https://github.com/vuejs/vue/...

2.2.4 和 2.0.3 的区别是 2.2.4 中data中声明的属性不会被另外两个覆盖，而 2.0.3 中computed定义的属性会覆盖另外两个。

在initState方法中你可以看到 init***(vm) 这一堆方法。在 2.2.4 中你可以看到 initComputed 方法最下面调用 defineComputed 往vm对象上挂载同名属性时有判断vm对象上是否已存在同名属性，所以2.2.4版本中computed声明的属性不会被computed中声明的重名属性覆盖。

这篇关于javascript - vue的computed怎么使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！