V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  shakukansp  ›  全部回复第 11 页 / 共 25 页
回复总数  496
1 ... 7  8  9  10  11  12  13  14  15  16 ... 25  
2023-01-03 14:31:48 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
https://codesandbox.io/s/vue3-jsx-demo-forked-g06sub?file=/src/components/Demo1.vue

楼主可以先点 2 3 个按钮
然后点第一个
继续点 2 3 个按钮
这是为什么会丢响应式
官网只告诉你为什么不建议解构 reative 对象,没说为什么
这是个初学者常犯的错误
2023-01-03 10:33:56 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
不说了,楼主再遇到响应式丢失的问题自然会回来翻我在说什么

看不懂我在讲什么的自己开个 sandbox 写写我 21 楼的情况吧

写道函数里面只是治了标,看楼主回复也没懂丢失响应式的本。
2023-01-03 02:00:02 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
我已经问你 把声明从函数里拿到外面 不能触发怎么说了,还在这嘴硬,你说我 35 楼暴露水平,恰恰是暴露了你的水平

至于 2 ,我想法又被你代表了,你上下文我懂,但是你没懂我说的 getter 代表什么,这就是暴露水平
2023-01-03 01:56:55 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 呵呵,你的解决方法楼主遇到我说的情况咋办,不是又要迷惑一次

单就这一点你已经跪了

我楼里讲的话可没有一点犹豫

你还要搬出诸如给什么项目提过什么 pr ,属实不行
2023-01-03 01:20:46 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
抽象层面,get 就是对一个变量取值的行为,你说况且它也没有 getter ,你确实暴露水平
2023-01-03 01:18:17 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 哦,你 35 楼说我暴露水平什么意思,讲的有问题吗,我看你是后面反应过来才改口

你家猫学两天能明白你还要这么多楼才能反应过来,讲话恶心人谁不会啊
2023-01-03 01:02:26 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
22 楼结论必没有错

我也没倔强什么,因为这就是预期内行为,就算不懂 vue 响应式原理也能通过 js 基础特性得出会丢失响应式的结论
2023-01-03 00:51:19 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 当然急啊,怕你误导楼主,为什么主楼这代码会有这种问题我还是得告诉楼主啊,你再看看我 21 楼回了什么

“原段代码就算把 someprops 改成 reactive ,依然无法通过修改 getOne.value 的值来触发视图更新,就算 getOne.value 里面的值是个对象也一样,具体会表现为修改 getOne.value 中对象的子属性可以触发更新,但是给 getOne.value 赋值一个不同引用的对象就会没法更新视图。”

此处原代码指主楼代码

重点在这里 “就算 getOne.value 里面的值是个对象也一样,具体会表现为修改 getOne.value 中对象的子属性可以触发更新,但是给 getOne.value 赋值一个不同引用的对象就会没法更新视图”

我就说死了,这就是引用链断了,引用问题引用问题引用问题,vue 虽然收集了依赖,但是 someprops 中的 one 已经和 getOne.value 引用的是不同的对象了
2023-01-03 00:37:22 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
我 21 楼也写的很清楚了,什么情况下 vue 会有什么表现我特么都写出来了

怎么就没想解决楼主问题了,嗯?
2023-01-03 00:35:45 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 我就是在和楼主讲这个问题,你再看看主楼代码,我回楼主的时候他还没回后面的代码呢。

仅仅传入一个数字,也是我说的值传递,这也是 vue 为什么要用 ref 包装一下基础类型的原因
和 setup 要返回一个函数和 options api 里面 data 要返回一个函数是一样的原因

你只说解决方法而不说下为什么像主楼这么写,改 getOne.value 没法触发视图更新吗
2023-01-03 00:29:16 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@shakukansp 接 45 楼,这才是为什么 setup 要返回一个函数才能让里面的 count.value 能被触发 getter

watchEffect 也是传了函数才能收集到依赖
2023-01-03 00:25:07 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 嘿,回你 43 楼,那你讲讲,const a = ref(1), 为什么 watch 要传 () => a.value 或者 a, 而不能传 a.value?
2023-01-03 00:20:42 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 你这又是把 setup 当渲染函数,又把东西放函数里了,要像 react 一样 setup 运行多次才能通过 getter 读取到新值。

我就问你,假如 setup 返回一个对象而不是渲染函数 那你这 { count: count.value, inc: () => count.value++ } 还能行吗
2023-01-03 00:05:41 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 为什么在函数里就能触发 getter 了?本质是什么,我真服了
2023-01-02 23:53:47 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
let a = 1
const fn = () => { console.log(a) }
fn()
a = 2
fn()

为啥两次打印的结果不一样啊
楼主你不要听楼上那个 pr 过 vue/reactive 的
2023-01-02 23:47:26 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller emmm 只能说得亏是 setup 里面 return 是个函数你才能得瑟,那你倒是讲讲 vue 为什么要你 return 一个函数啊
2023-01-02 23:39:33 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
写函数外面然后在函数里面{...props}
是不是也调用 props 的 getter 了?那为什么写函数外面运行 inc 触发不了视图更新?不就是引用没了吗
2023-01-02 23:33:57 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 回你 30 楼 我都说了,你写在函数里面当然没问题,是引用传递,你写函数外面还能这样?你再想想?还要我多看看源码,自己多提升一下 js 基础吧
2023-01-02 23:32:12 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
@johnkiller 我的意思是解决这个问题并不需要懂 vue 的响应式原理,丢失响应式就是个引用链断裂的问题

你把变量声明写在函数里,也是建立了对 js 对象值的引用,这和 vue 并没有什么关系

要让它按楼主想的一样运行实际操作就是像官方文档一样照本宣科用 reactive 包一下 ref ,这样 vue 自然有内部操作去数据代理

const a = reacvtive({ c:1 })
const b = ref(3)
a.c = b.value
a.c = b
console.log(a)得到的结果都是 a 是 { c:3 } 用脚想都知道直接传包装对象 ref 的时候 vue 会有特殊的操作
不需要懂什么响应式原理,要的就是一句官方文档的说明

OP 写过 golang 就能对 js 这个基本特性有更深的理解
2023-01-02 23:13:53 +08:00
回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
你这个代码能生效是因为在函数里面的 count.value 是引用传递,而不是值传递啊

传 () => string 能和直接传 string 一样吗
1 ... 7  8  9  10  11  12  13  14  15  16 ... 25  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1033 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 13ms · UTC 19:46 · PVG 03:46 · LAX 11:46 · JFK 14:46
Developed with CodeLauncher
♥ Do have faith in what you're doing.