Toypipi's blog

发表于 更新于 分类于 本文字数： 637 阅读时长 ≈ 2 分钟

vue2.x 的响应式

  • 实现原理：

    • 对象类型：通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）。

    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

      1
      2
      3
      4
      Object.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
        16
        new 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.7k 阅读时长 ≈ 6 分钟

绝对不可以踩的坑

1.学英语的关键，不是孩子记住多少种类的单词，而是首先要感兴趣。

不在乎孩子的兴趣，就知道背单词，自然拼和音标，孩子会有两个结果，要么讨厌英语，要么聋哑英语。

2.学英语的关键，不是你问孩子，苹果，香蕉用英语怎么说，他都能说出来，而是听到了 apple 了，立刻反应苹果的画面。

  • 翻译性思维，导致孩子每次说英语，都要先想汉语，再翻译过来，反应迟钝，无法用英语沟通。 X
  • 英语思维，图像直接对应单词，条件反射，用英语直接思考。 √

3.学英语的关键，不是宝妈焦虑为什么我的孩子还不说英语，而是宝妈耐得住寂寞。

语言是有沉默期的，沉默期在 6 个月—12 个月，孩子都能听得懂，就是不说，是在正常的语言沉默期内，逼，只会延长这个时期，甚至孩子决定“闭嘴一辈子”。

阅读全文 »

发表于 分类于 本文字数： 482 阅读时长 ≈ 2 分钟

L1-L4

  • 观察方法与绘画表达
  • 认知图形与形状探索
  • 色彩认知与颜色运用
  • 色彩的变化与感受

L5-L8

  • 绘画方法与画面节奏
  • 图形组合与形状表现
  • 色彩进阶与色调认知
  • 绘画中的秩序与规律

L9-L12

  • 视觉感受与色彩搭配
  • 形色创意与联想
  • 质感与肌理表现
  • 艺术风格与材料运用
    阅读全文 »

发表于 分类于 本文字数： 120 阅读时长 ≈ 1 分钟

将 ECharts 从 4.9.0 升级到 5.4.0。

如果项目中使用了 ECharts 的地图，注意升级前需要将 node_modules 文件夹下的 echarts 文件夹下的 map 文件夹备份，升级后再复制到该目录下。

注意升级后 ECharts 的引入方式改变了，将之前的引入方式修改为：

1
import * as echarts from "echarts";
阅读全文 »
0%