文总结了 vue 组件间通信的 7 种方式: props/$emit $emit/$on（eventBus） $parent/$children $attrs/$listeners provide/inject vuex ref / refs localStorage / sessionStorage 用简单的实例讲述这其中的差别及使用场景，希望对小伙伴有一些帮助 props/$emit父组件 A 通过 props 的方式向子组件 B 传递，子组件 B 传递给父组件 A 通过在子组件 B 组件中 $emit 提交, 父组件 A 中 v-on 监听事件的方式获取 父组件向子组件传值接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 u ...

演进过程全局function模式: 将不同的功能封装成不同的全局函数 编码: 将不同的功能封装成不同的全局函数 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系 123456function m1(){ //...}function m2(){ //...} namespace 模式: 简单对象封装 作用: 减少了全局变量，解决命名冲突 问题: 数据不安全(外部可以直接修改模块内部的数据) 1234567891011let myModule = { data: 'www.baidu.com', foo() { console.log(`foo() ${this.data ...

react 新特性 Context 实现跨层级的组件数据传递，静态属性 ContextType 访问跨层级组件的数据 Lazy 与 Suspense 实现延迟加载（类似于 vue 的异步组件） Memo 实现指定组件进行渲染（优化组件渲染，当传入组件的属性值都不变的情况下，不会触发组件的重新渲染，用于函数组件中替代 PureComponent，注意 PureComponent 只监听第一层属性的变化，当属性拆分越简单，使用的概率就越高） 这里暂时举例，官网都有，下面使用 Hooks 也会涉及到部分 HooksHooks 的意义类组件的不足: 状态逻辑难以复用 缺少复用机制 渲染属性和高阶组件会导致层级冗余 趋向复杂难以维护 生命周期函数混杂不相干逻辑 相干逻辑分散在不同生命周期函数中 this 指向 ...

以下为 node 服务和 前端的自动部署简单脚本，需要前后端代码的 git 服务也本身在服务器上。 部署node服务123456789101112131415echo "开始更新 服务1 服务器端"cd /root/wechat/node-serverecho "正在更新代码..."git pullecho "正在重启服务..."node app.js &echo "服务1 服务端启动成功"echo "开始更新 服务2 服务器端"cd /root/wechat/node-admin-serverecho "正在更新代码..."git pullecho "正在重启服务..."node app.js &echo "服务2 服务端启动成功" 部署前端服务1234567891011echo "开始更新前 ...

Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。有些同学可能会问，那我定义一个全局对象，再去上层封装了一些数据存取的接口不也可以么？ Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代 ...

路由的概念相信大部分同学并不陌生，它的作用就是根据不同的路径映射到不同的视图。我们在用 Vue 开发过实际项目的时候都会用到 Vue-Router 这个官方插件来帮我们解决路由的问题。Vue-Router 的能力十分强大，它支持 hash、history、abstract 3 种路由方式，提供了 和 2 种组件，还提供了简单的路由配置和一系列好用的 API。 路由注册Vue.use Vue 提供了 Vue.use 的全局 API 来注册这些插件 Vue.use 接受一个 plugin 参数，并且维护了一个 _installedPlugins 数组，它存储所有注册过的 plugin；接着又会判断 plugin 有没有定义 install 方法，如果有的话则调用该方法，并且该方法执行的第一个参数是 Vue；最后 ...

数据驱动Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。 数据驱动还有一部分是数据更新驱动视图变化，这一块内容我们也会在之后的章节分析，这一章我们的目标是弄清楚模板和数据如何渲染成最终的 DOM。 new Vue 发生了什么？Vue 实际上就是一个用 Function 实现的类，我们只能通过 new Vue 去实例化它。 Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法 123456789101112131415vm._self = vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initIn ...

二叉查找树（Binary Search Tree），它或者是一棵空树，或者是具有下列性质的二叉树： 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值 若它的右子树不空，则右子树上所有结点的值均大于它的根结点的值 它的左、右子树也分别为二叉排序树 二叉搜索树需要特别记住的一点就是，它的中序遍历的序列是递增排序的。 还需要留意二叉搜素树的前驱和后继节点怎么获取。 二叉搜索树对象我创建了一个 BST 对象，来对二叉树进行插入、删除、查找等常用的操作： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676 ...

这里通过对比四种排序算法：插入排序，归并排序，快速排序和堆排序，来总结一下它们的使用场景和优缺点。 先上图： 平均时间复杂度从平均时间复杂度来看，只有插入排序是 O(n^2) 的时间复杂度，其他三种排序都是 O(nlogn) 的时间复杂度。 注意，这里说的是平均的时间复杂度，为什么要强调是平均时间复杂度呢? 大家应该知道，比如说对于插入排序，当我们要排序的数组已经是有序的情况下，那么插入排序算法就会退化到 O(n) 这个级别的时间复杂度。而对于快速排序算法，在极其特殊的情况下也会退化成 O(n^2) 级别的时间复杂度，我们一般会使用随机化的方式来尽量避免这个问题，使得快速排序算法退化成 O(n^2) 级别的时间复杂度的概率变得极其极其的小。 在通过前面的比较测试，可以发现：总体而言快速排序是更加快的排序算法。 ...

二分查找适合在一个有序数组种查找目标值，判断目标值是否存在 以下代码采用二分查找法，在有序数组种查找指定值，找到则返回索引，否则返回 -1： 迭代法 123456789101112131415161718function binarySearch (arr, n, target) { let l = 0 let r = n - 1 while (l <= r) { let mid = l + Math.floor((r - l) / 2) if (arr[mid] === target) { return mid } else if (arr[mid] > target) { r = mid - 1 & ...