Vue 给对象添加新属性时视图不更新
vue2.x 的响应式
实现原理：
对象类型：通过
Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
1
2
3
4Object.defineProperty(data, "count", {
get() {},
set() {},
});
存在问题：
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
Vue3.0 的响应式
实现原理:
通过 Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过 Reflect（反射）: 对源对象的属性进行操作。
MDN 文档中描述的 Proxy 与 Reflect：
Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16new Proxy(data, {
// 拦截读取属性值
get(target, prop) {
return Reflect.get(target, prop);
},
// 拦截设置属性值或添加新属性
set(target, prop, value) {
return Reflect.set(target, prop, value);
},
// 拦截删除属性
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop);
},
});
proxy.name = "tom";
解决办法
在 Vue 2 中，当你向一个对象添加新属性时，Vue 不会自动触发视图的更新，因为 Vue 只会追踪已经存在于数据对象中的属性。如果你需要在视图中响应新属性的变化，你可以使用 Vue 的 $set 方法或 JavaScript 的 Object.assign 来更新对象，从而触发视图的刷新。
英语启蒙秘籍
绝对不可以踩的坑
1.学英语的关键，不是孩子记住多少种类的单词，而是首先要感兴趣。
不在乎孩子的兴趣，就知道背单词，自然拼和音标，孩子会有两个结果，要么讨厌英语，要么聋哑英语。
2.学英语的关键，不是你问孩子，苹果，香蕉用英语怎么说，他都能说出来，而是听到了 apple 了，立刻反应苹果的画面。
- 翻译性思维，导致孩子每次说英语，都要先想汉语，再翻译过来，反应迟钝，无法用英语沟通。 X
- 英语思维，图像直接对应单词，条件反射，用英语直接思考。 √
3.学英语的关键，不是宝妈焦虑为什么我的孩子还不说英语，而是宝妈耐得住寂寞。
语言是有沉默期的，沉默期在 6 个月—12 个月，孩子都能听得懂，就是不说，是在正常的语言沉默期内，逼，只会延长这个时期，甚至孩子决定“闭嘴一辈子”。