ZengXPang's blog

nextTick 原理定义一个 callbacks 数组用来存储 nextTick，在下一个 tick 处理这些回调函数之前，所有的 cb 都会被存在这个 callbacks 数组中。pending 是一个标记位，代表一个等待的状态。setTimeout 会在 task 中创建一个事件 flushCallbacks ，flushCallbacks 则会在执行时将 callbacks 中的所有 cb 依次执行。 let callbacks = []; let pending = false; function nextTick(cb) { callbacks.push(cb); if (!pending) { pending = false; setTimeout(flushCallbacks, 0); } } function flushCallbacks() { pending = false; const copies = callbacks.slice(0); callbacks.length = 0; copies.forEach( ...

本文参考:看了就会，手写 Promise 原理，最通俗易懂的版本！！！ /* 1、执行了resolve，Promise状态会变成fulfilled 2、执行了reject，Promise状态会变成rejected 3、Promise只以第一次为准，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected 4、Promise中有throw的话，就相当于执行了reject */ /** then接收两个回调，一个是成功回调，一个是失败回调 当Promise状态为fulfilled执行成功回调，为rejected执行失败回调 如resolve或reject在定时器里，则定时器结束后再执行then then支持链式调用，下一次then执行受上一次then返回值的影响 */ /* 1、then方法本身会返回一个新的Promise对象 2、如果返回值是promise对象，返回值为成功，新promise就是成功 3、如果返回值是promise对象，返回值为失败，新promise就是失败 4、如果返回值非promise对象，新promise对象就是成功，值为此返回值 */ ...

原文地址本文是转载，如果侵权麻烦留言告知删除 Vuex我们在使用 Vue.js 开发复杂的应用时，经常会遇到多个组件共享同一个状态，亦或是多个组件会去更新同一个状态，在应用代码量较少的时候，我们可以组件间通信去维护修改数据，或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后，代码就会变得难以维护，从父组件开始通过 prop 传递多层嵌套的数据由于层级过深而显得异常脆弱，而事件总线也会因为组件的增多、代码量的增大而显得交互错综复杂，难以捋清其中的传递关系。 那么为什么我们不能将数据层与组件层抽离开来呢？把数据层放到全局形成一个单一的 Store，组件层变得更薄，专门用来进行数据的展示及操作。所有数据的变更都需要经过全局的 Store 来进行，形成一个单向数据流，使数据变化变得“可预测”。 Vuex 是一个专门为 Vue.js 框架设计的、用于对 Vue.js 应用程序进行状态管理的库，它借鉴了 Flux、redux 的基本思想，将共享的数据抽离到全局，以一个单例存放，同时利用 Vue.js 的响应式机制来进行高效的状态管理与更新。正是因为 Vuex 使用了 Vue.j ...

<br/>+'要被写在下一行的内容' 我被换行啦啦啦 锚点标题的话 语法就是[前台内容](#标题的名字)。注意在typora中测试锚点的话需要按住ctrl键才行哦 换行的锚点 非标题的话 需要跳转的地方： <p name="targets">我是目标位置</p> 锚点处：[前台内容]（#targets） 我是目标位置 diff 代码块+ import { onMounted, reactive, watchEffect } from 'vue' export default { name: "App", + setup( props ) { + const state = reactive({ /*...*/ }); + onMounted(() => { /*...*/ }); + watchEffect(() => { /*...*/ }); + return { state }; + }, - data: () => ({ state: /*...*/ }), - mounted( ...

Q1:父组件中在 setup 如何才能拿到子组件的 ref 的 Dom 节点？// 子 <template></template> <script lang="ts"> import { defineComponent, ref, reactive, h } from 'vue' export default defineComponent({ name: 'myB', setup(props, { expose }) { const read = ref(0) const book = reactive({ title: 'Vue3 Guide' }) const reset = () => { console.log(`某些重置逻辑`) } // expose只能被调用一次，可以在父组件中通过ref访问到 expose({ reset }) return () => h('h3', [read.value, book.t ...

响应式原理响应式的过程是啥？ 利用 getter/setter 来对每个对象的属性进行监听，属性变化之后呢，发送到对应的组件的内部，让对应的组件来利用虚拟 dom 更新组件，进而来更新视图。 Object.defineProperty(obj,prop,desc):直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 obj 需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符 javcript 有三种类型的属性 命名数据属性：拥有一个确定的值的属性。这也是最常见的属性 命名访问器属性：通过getter和setter进行读取和赋值的属性 内部属性：由 JavaScript 引擎内部使用的属性，不能通过 JavaScript 代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有 ...

类基本使用 下个的项目需要用到 ts 的 class。本文总结下 class 的用法。 ES6 引进来的 class 只是一个语法糖。 例子：ES5 生成的实例对象是通过构造函数生成的。有些人觉得不好哇，虽然我不觉得(应该是自己见识少 🤔)。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { console.log(`${this.x} + ${this.y}`); // 1+2 }; let p = new Point(1, 2); p.toString(); 如果用 ES6 的 class 来实现的话：其实 ES6，就是构造函数的另外一种写法。 class Point { constructor(x, y) { // 构造函数 construction是类的默认方法，如果不显式写出来，就会默认添加空的该方法。默认返回return this。可以显示的改变返回。例如return Object.create(null) 指向 ...

介绍发布订阅模式是一种多对一的关系。即订阅者订阅不同的主题，当发布者发布相关的主题的时候呢，订阅者可以收到相关的发布的信息。 实现方式看代码中的注释，发布订阅就是根据主题来做，并且存进相应的订阅回调。通俗的说呢，就是list保存订阅的时候的回调函数，发布的时候传参数进去，被订阅每个回调函数都去执行，那么这个传进去的参数就是我们发布的时候携带的内容啦啦啦。 let events = { list: {}, //存订阅的回调函数 // 订阅事件 on(key, fn) { !this.list[key] && (this.list[key] = []); this.list[key].push(fn); }, // 发布事件 emit() { let key = [].shift.call(arguments); let fns = this.list[key]; if (!fns || fns.length === 0) { return false; } fns.forEach( ...

el-scrollbar 用法官方文档没有写出来。记录下！！！ <template> <div> <h2>list:</h2> <el-scrollbar wrap-style="font-weight:bold" // 这个貌似不起作用？一般不用 wrap-class="list" // 增加class view-style="font-weight:bold;color:blue"// 增加行内样式，一般不用 view-class="view-box" // 增加class :native="false" > <div v-for="value in num" :key="value"> {{ value }} </div> </el-scrollbar> </div> </template> <script> ...

什么是 NodeJSJS 是脚本语言，脚本语言都需要一个解析器才能运行。对于写在 HTML 页面里的 JS，浏览器充当了解析器的角色。而对于需要独立运行的 JS，NodeJS 就是一个解析器。 每一种解析器都是一个运行环境，不但允许 JS 定义各种数据结构，进行各种计算，还允许 JS 使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的 JS 的用途是操作 DOM，浏览器就提供了document之类的内置对象。而运行在 NodeJS 中的 JS 的用途是操作磁盘文件或搭建 HTTP 服务器，NodeJS 就相应提供了fs、http等内置对象。 模块NodeJS 遵循的模块化规范是commonJS。其原理及使用规则见 xxx。NodeJS主模块就是通过命令行参数传递给NodeJS启动程序的模块。一个模块中的JS代码仅在模块第一次被使用时执行一次，并在执行过程中初始化模块的导出对象。之后，缓存起来的导出对象被重复利用。一个JS模块里面的变量因为会被缓存，所以在多处调用的地方值是会互相影响的。 模块路径解析规则按照以下规则解析路径，直到找到模块位置 内置模块 如果传递给requ ...