coli 最近的时间轴更新 coli 最近的时间轴更新 |
coliV2EX 第 497240 号会员，加入于 2020-07-02 00:06:00 +08:00今日活跃度排名 8295 |
coli 最近回复了
68 天前 回复了 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