Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue3 function api使用中存在的问题,请问如何解决 #10198

Closed
Jokcy opened this issue Jun 26, 2019 · 5 comments

Comments

Projects
None yet
4 participants
@Jokcy
Copy link

commented Jun 26, 2019

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-zlflg?fontsize=14

Steps to reproduce

这个问题是在使用 https://github.com/vuejs/vue-function-api 的时候发现的,个人认为这个问题非常严重,不确定是否是在计划中的还是预计在更新来vue3之后会自然而然解决的,所以在这里提出。

社区应该是接受中文issue的,自己英语没有那么给力,就直接中文提问来。

这个问题很简单,考虑有如下组件:

export default {
  setup(props) {
    const data = props.data
    const x = computed(() => data.num   1)

    return { x }
  }
}

这里的 data 是一个对象,在这种情况下,如果 props.data 改变成一个新的对象,那么 x 这个 computed 变量,是无法响应新的 data 变化的。以我对 vue 的理解,这是因为 computed 的属性是根据调用过程中触发来依赖的 get 来绑定依赖的。而这种情况下恰恰我们无法绑定依赖到 props.data,仅仅是绑定到了 data.num

这是 computed 绑定依赖的问题,所以跟 reactive 实现的方式应该无关,也就是说即便改成来 proxy 的方式,这个问题可能依然存在。

不知道该问题应该如何解决?

What is expected?

即便在写setup的时候先从 props 中读取来属性,依然应该能检测到 props.xxx 的变化

What is actually happening?

在读取了data之后再依赖data,无法检测到 props.data 的变化

@DricHao

This comment has been minimized.

Copy link

commented Jun 26, 2019

改变成新的对象。难不成是Object.assign?

@Justineo

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

@Justineo Justineo closed this Jun 26, 2019

@Jokcy

This comment has been minimized.

Copy link
Author

commented Jun 26, 2019

@DricHao 比如上层组件传入的是一个 computed 的属性,来自于 cont data = computed(() => ({ num: xxx })),其中 xxx 是一个 value(123),每次 xxx 改变会让data更新成一个新的对象。

@Justineo 可否更详细指出哪里提到了?我没在那边看到跟这个问题有关的描述

@yyx990803

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

返回的 data 是一个 value wrapper,是不会变成新的对象的... 每次传下去的都是同一个对象

@Jokcy

This comment has been minimized.

Copy link
Author

commented Jun 26, 2019

@yyx990803 我可以理解为 computed 更新的实际上是 data.value 对么。但是归根到这个例子上,传递给子组件的 data 也就是 props.data 应该是解除 wrapper 之后的 value 吧。这样还是无法解释在出现data.value 整体变化之后,子组件的 computed 依赖的是 data.num 而无法观察data自身变化的问题。至少目前的demo问题是存在的,或者这是现在的实现的问题?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.