coli's recent timeline updates coli's recent timeline updates |
coliV2EX member #497240, joined on 2020-07-02 00:06:00 +08:00 |
coli's recent replies
Jul 21, 2025 Replied to a topic by liuliancc › Vue.js › 求助 Vue 大佬，为什么使用 reactive 数据没有双向绑定？ |
举个简单的例子吧：
```javascript
const a = reactive({ b: 1 });
// some logics ...
a = { b: 123 };
```
结果会报错，因为你在尝试把 `const` 定义的值赋值为另外一个值。
而 `<Comp v-model="styleConfig" />` 的语法糖等效为：
```vue
<Comp :modelValue="styleConfig" @update-modelValue="(newVal) => styleConfig = newVal" />
```
这边 `styleConfig = newVal` ，看出问题了吧？
---
而用 `ref` 没问题是因为，ref 用了一层 `.value` 包裹起来，这样你把原来整个对象覆盖掉，改到的都是 `.value` ，而不是 `styleConfig` 这个对象本身。
不过看原来的代码，把 `v-model="styleConfig.fontSize"` 传出去就好了，这么绕除非你想要用到 `styleConfig` 的其他属性……
---
PS：Vue3 可以用 `defineModel` 写，用起来很爽。
---
PPS: 这也是个 JS 对象地址的问题：
```javascript
const a = [ { x: 1 }, { y: 2 }, { z: 3 } ];
const b = a[0];
a[0].x = 2;
console.log(b); // => { x: 2 }
a[0] = { x: 3 };
console.log(b, a[0] === b); // => { x: 2 } , false
```
```javascript
const a = reactive({ b: 1 });
// some logics ...
a = { b: 123 };
```
结果会报错，因为你在尝试把 `const` 定义的值赋值为另外一个值。
而 `<Comp v-model="styleConfig" />` 的语法糖等效为：
```vue
<Comp :modelValue="styleConfig" @update-modelValue="(newVal) => styleConfig = newVal" />
```
这边 `styleConfig = newVal` ，看出问题了吧？
---
而用 `ref` 没问题是因为，ref 用了一层 `.value` 包裹起来，这样你把原来整个对象覆盖掉，改到的都是 `.value` ，而不是 `styleConfig` 这个对象本身。
不过看原来的代码，把 `v-model="styleConfig.fontSize"` 传出去就好了，这么绕除非你想要用到 `styleConfig` 的其他属性……
---
PS：Vue3 可以用 `defineModel` 写，用起来很爽。
---
PPS: 这也是个 JS 对象地址的问题：
```javascript
const a = [ { x: 1 }, { y: 2 }, { z: 3 } ];
const b = a[0];
a[0].x = 2;
console.log(b); // => { x: 2 }
a[0] = { x: 3 };
console.log(b, a[0] === b); // => { x: 2 } , false
```
Select Language