本章目标：
计算属性的实现原理，如何实现 lazy ，缓存，解决嵌套问题？
watch 是如何实现监听对象变化，并调用回调函数的？监听对象和监听getter函数的区别？
立即执行的 watch 是如何实现的？如何决定回调执行时机？
……
4.8 计算属性 computed 与 lazy上面实现的 effect 会立即执行传入的副作用函数，有时候我们并不希望立即执行，而是需要的时候才执行。例如计算属性。可以通过在 options 中配置 lazy 属性达到目的。
12345effect(() => { console.log(obj.foo)}, { lazy: true})
在 effect 函数中就可以根据 lazy 属性确定是否执行副作用函数：
12345678910111213141516171819202122232425function effect(fn, options={}) { const effectFn = () => { // 调用 cleanup 完 ...
本章目标
本章目标：
讨论什么是响应式数据和副作用函数，实现一个相对完善的响应式系统
如何避免无限递归？
为什么需要嵌套副作用函数？
两个副作用函数之间会产生哪些影响？
……
4.1 响应式数据和副作用函数
副作用函数：是指执行会直接或间接影响其他函数执行的函数。例如，一个函数内修改全局变量的值，函数就是一个副作用。
响应式数据：在一个副作用 effect 函数中读取对象 obj 的 text 属性值，在对象 obj.text 值发生变化后，副作用 effect 函数自动执行。那个这个对象 obj 就是响应式数据。
4.2 响应式数据的基本实现如果要实现 obj 成为响应式数据，需要拦截对象的读取和设置操作。
在读取字段 obj.text 时，把副作用函数 effect 存储“桶”中。
在设置字段 obj.text 时，把副作用 effect 从 “桶”中取出并执行即可。
在 Vue2 中使用 Object.defineProperty 函数实现。在 Vue3 使用代理对象 Proxy 实现。
123456789101112131415161718192021222324 ...
前言SQLite 是一种嵌入式数据库，它的数据库就是一个文件。
Sequelize 是一个基于 promise 的 Node.js ORM, 目前支持 Postgres, MySQL, MariaDB, SQLite 以及 Microsoft SQL Server. 它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功能.
基于 Sqlite3 的项目，直接是用 Sequelize 进行对象和表的映射。
环境配置12// 安装npm i sequelize sqlite3 -S
项目结构
配置文件夹 config123456789101112// config/config.jsconst path = require('path')const sqlite3 = require('sqlite3').verbose()module.exports = { test: { storage: path.join(__dirname, '../db/db_test.sqlite'), // ...
写在前面的话项目结构
1、配置 Server 打包位置12345678910// vue.config.jspluginOptions: { electronBuilder: { builderOptions: { //... // 匹配server中的所有文件夹和文件 extraResources: ['server/**/**'] // 指定打包 Server 到 Resource 文件夹中。 } }}
会将 server 文件夹打包到 Resources 文件夹中。为什么不打包大 app.asar 中呢？因为.asar 文件是只读的，无法进行数据库的写入。
2、配置webpack1234// vue.config.jsconfigureWebpack: { externals: ['pg', 'sqlite3', 'tedious', 'pg-h ...
写在前面的话在做前端项目时，需要将 Web 项目打包成 Win 应用，使用 Electron 相关技术。这个系列是整理 Electron 学习中遇到的问题和常见知识点，留做记录方便后续复习。
本篇介绍：
Electron 系统托盘实现
Electron 开机自动启动
系统托盘 && 开机自启在 Electron 中提供了系统托盘的 API - [Tray]，参考后面的链接。所有需要引入Tray 和 Menu。
1234// main.jsimport { Menu, Tray } from 'electron'// 定义全局托盘let tray = null // 局部的会销毁。《=== 如果不定义成全局的，应用启动后托盘一闪就没了，^_^
目标系统是 win ，其他的平台限制请参考文档。 通过 process.platform 限制系统。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 ...
前言
本文作为学习笔记，文中内容大多来自官方文档和一些资料，摘抄的部分会在文中标注出原文地址，可以直接参考原文。
前两篇学习了 TS 中基本类型、函数、类、接口、泛型以及高级类型概念和使用方法。这些是基础知识点，虽然简单但是很重要。本文将复习 JS 中的模块对比不同方式模块的区别；如何使用命名空间隔离代码；声明合并的规则等。
模块在 ES6 之前采用的模块加载方案，主要有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在此基础上实现了模块的功能，使用简单可以完全取代之前的方案，成为浏览器和服务器通用的模块解决方案。
下面学习 ES6 中模块的导出和导入。
导出ES6 提供了多种导出方式，例如：单独导出，批量导出、导出接口/函数、导出起别名、默认导出以及复合导出等。
导出使用 export命令，举个例子：
123456789101112131415161718192021222324252627282930313233// a.js// 单独导出export const a = 'a'// 批量导出const b = ...
前言
本文作为学习笔记，文中内容大多来自官方文档和一些资料，摘抄的部分会在文中标注出原文地址，可以直接参考原文。
上一篇学习了 TS 的基本数据类型、接口、函数和类等基本用法。接下来继续深入学习一些相对 JS 来说 TS 中新增的内容。
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
下面通过一个例子来了解泛型，如何实现一个打印函数呢？
1234function log (value: string): string { console.log(value) return value}
上面的这个 log 方法，只能接收和返回 string 类型数据。如何才能让该方法接收和返回 string[] 类型的数据呢？
第一种方法：函数重载，通过重载可以动态的匹配符合的类型。
123456function log (value: string): string;function log (value: string[]): string[]function log (value: any): ...
前言
声明：本文中大量的来自 《TypeScript 文档》。
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。随着 TypeScript 的发展，很多的库都在使用它进行开发和重写，如Vue3.0就是通过TS进行开发的。如果不会 TypeScript 根本就读不懂源码。所以说目前来学习TypeScript正是时候 ，让我们一起入门 TypeScript吧！
PS: 为了方便书写下面行文 TypeScript 简写为 TS，JavaScript 简写为 JS。
更新：2020-7-31
类型系统原始类型众所周知 JS 分为原始数据类型和对象类型。原始数据类型：boolean, number, string, null, undefined 以及 Symbol。另外，TS 中还提供了 any，never， tuple，void，enum 等。
在 TS 中使用了类型注解方式声明变量。如强类型语言中的变量类型一样，用于约束变量类型。
布尔值12345678let isDon ...
异步JS 是单线程的，对于耗时任务如果按照顺序执行，就会导致浏览器假死卡住。所以需要异步来处理耗时任务，当任务完成后才去处理。
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务：不进入主线程，而进入任务队列中的任务，主线程完成一个事件循环空闲后，会从任务队列中读取新的任务进入主线程执行。
事件循环（Event Loop）：只有执行栈中的所有同步任务都执行完毕，系统才会读取任务队列，看看里面的异步任务哪些可以执行，然后那些对应的异步任务，结束等待状态，进入执行栈，开始执行。
为什么JS要设计成单线程呢？
异步的解决方案回调函数早期常用的异步操作方式，有个致命的缺点，极容易写出回调地狱。
123456789ajax(url, ()=>{ // xxx ajax(url,()=>{ // xxx ajax(url, () => { // xxx }) })})
不利于代码阅读和维护，毕竟 ...
前言随着 TypeScript 使用的越来越广泛，是时候入门 TypeScript 。接下来，这篇文章学习 TypeScript 时，通过 Webpack 搭建的 TypeScript 开发环境，方便学习。本人也是刚开始入门，难免会出现错误，请不吝指正。
接下来进入 TypeScript 开发环境搭建吧！
TypeScript 安装安装没有什么好说的，就是使用 npm 在终端执行：
123npm i typescript -g // 全局安装tsc -v // 验证是否成功
初始化项目目录1234mkdir typescript_webpack // 创建文件夹cd typescript_webpack // 进入文件夹npm init -y // 生成 package.json 文件，-y：使用默认值快速创建。tsc -init // 创建 tsconfig.json， 指定所在目录为根目录。
此时在项目目录中创建了一个 package.json 文件，后面会在这里面管理三方库。tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。后面具体说明配置项含义。
上 ...
