04 2023 档案
摘要：交换数字 /** * @param {number[]} numbers * @return {number[]} */ var swapNumbers = function(numbers) { numbers.push(numbers.splice(0,1)) return numbers };
阅读全文
摘要：effect实现 定义effect方法： export function effect(fn, options: any = {}) { // 创建响应式的effect const effect = createReactiveEffect(fn, options); // 默认会让effect先执
阅读全文
摘要：数字流的秩 代码： var StreamRank = function() { this.arr = [] }; /** * @param {number} x * @return {void} */ StreamRank.prototype.track = function(x) { this.a
阅读全文
摘要：reactive的实现 使用： 使用reactive()函数创建一个响应式对象。 import { reactive } from 'vue' export default { // `setup` 是一个专门用于组合式 API 的特殊钩子函数 setup() { const state = rea
阅读全文
摘要：Vue组件间传值的方式及之间区别 通过props传递：父组件传递数据给子组件 使用 // chilid,vue props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, //
阅读全文
摘要：堆箱子 思路： 首先进行排序，规则为： 如果宽度不相同，按照宽度从小到大排序。 如果宽度相同，深度不相同，按照深度从大到小排序。 宽度和深度都相同，高度从大到小排序。 采用动态规划进行求解： 计算以当前盒子为顶部盒子时的最大堆叠高度。 从前往后遍历每一个盒子，对于每一个盒子i，遍历i之后的所有盒子j
阅读全文
摘要：异步组件 Vue 中异步组件的写法有很多，主要用作大的组件异步加载的markdown组件editor组件。就是先渲染一个注释标签，等组件加载完毕，最后再重新渲染 forceUpdate（图片懒加载）使用异步组件会配合 webpack 原理：异步组件默认不会调用 Vue.extend()方法 所有Ct
阅读全文
摘要：变为词组 思路： 哈希模拟 /** * @param {string[]} strs * @return {string[][]} */ var groupAnagrams = function(strs) { // {'aet':["ate","eat","tea"]} let hash = ne
阅读全文
摘要：Vue.set方法是如何实现的 vue.set 方法是vue中一个补丁方法（正常我们添加属性是不会触发更新的，我们数组无法监控到索引和长度） 如何实现的 我们给每一个对象都添加了一个 dep 属性 vue3 中不需要此方法了（当属性添加或者删除时，手动触发对象本身的 dep 来进行更新） 源码： /
阅读全文
摘要：八皇后 直接上代码： /** * @param {number} n * @return {string[][]} */ var solveNQueens = function(n) { // 创建一个长度为n的一维数组，其元素值为'.'，然后再利用map()方法将其转化成一个n * n的二维数组b
阅读全文
摘要：computed和watch的区别 computed 和watch的相同点。底层都会创建一个 watcher（用法的区别：computed 定义的属性可以在模板中使用，watch 不能在视图中使用） computed 默认不会执行 只有取值的时候才会执行 内部会维护一个 dirty 属性，来控制依赖
阅读全文
摘要：颜色填充 思路：使用深搜就可解决 对坐标点(sr,sc)进行填充。 然后在此处进行扩散。 代码： function fill(image, sr, sc, newColor) { // 记录初始颜色值 const oldColor = image[sr][sc]; // 如果新颜色与初始颜色相同则无
阅读全文
摘要：nextTick在哪里使用？原理是什么？ nextTick内部采用了异步任务进行包装（多个nextTick调用会被合并成一次，内部会合并回调）最后在异步任务中批处理。 主要应用场景就是异步更新（默认调度的时候就会添加一个·nextTick 任务）用户为了获取最终的渲染结果需要在内部任务执行之后再执行
阅读全文
摘要：无重复字符全排列 思路： 使用回溯进行解决。 主要是定义一个backRound函数，表示回溯。 注意回溯出口：就是长度等于S的长度，且没有存储。 代码： var permutation = function(S) { // 定义函数 permutation，接收字符串 S 作为参数 let res
阅读全文
摘要：mixin的使用和原理 使用： 可以通过 Vue.mixin 来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突 vue3 采用的就是 compositionAPI 局部混入： var myMixin = { created: function () { this.hello()
阅读全文
摘要：递归乘法 直接上代码： /** * @param {number} A * @param {number} B * @return {number} */ var multiply = function(A, B) { if(A 0 || B 0)return 0 arr = [0] for(let
阅读全文
摘要：Vue的生命周期 钩子函数是如何实现？ 内部利用一个发布订阅模式，将用户写的钩子维护成一个数组，后续依次调用hooks。主要靠的是mergerOptions 方法有哪些？ 引用自https://vue3js.cn/interview/vue/lifecycle.html#%E4%BA%8C%E3%8
阅读全文
摘要：魔术索引 思路： 直接代码 function findMagicIndex(nums) { let i = 0 if(!nums.length){ return -1 } else{ while(i <= nums.length && i !== nums[i]){ i ++ } let min =
阅读全文
摘要：diff算法 diff算法的特点就是平级比较，内部采用了双指针方式进行优化，优化了常见的操作。采用了递归比较的方式。 针对一个节点的diff算法 先拿出根节点来进行比较如果是同一个节点则比较属性，如果不是同一个节点则直接换成最新的即可。 同一个节点比较属性后，复用老节点 比较儿子 一方有儿子 一方没
阅读全文
摘要：三步问题 思路： 通过题意很明显就是动态规划问题，而且本问题很简单（是两步楼梯的进阶版），构造动态转换方程为：
摘要：异步更新 异步更新原因 以下情况下： vm.name = '123' vm.name = '234' vm.name = '123' ... 如果我们频繁的修改一个数据，就会多次触发视图渲染dep.notify->watcher.update 这样就会降低性能，因此就需要采用异步更新策略，仅仅在最后
阅读全文
摘要：配位交换 思路： 分别保留偶数为和奇数位，然后分别右移和左移。 /** * @param {number} num * @return {number} */ var exchangeBits = function(num) { // 用来保留奇数位 const add = 0x55555555 /
阅读全文
摘要：依赖收集的过程 前言 使用真实节点替换原始节点，主要涉及以下步骤： 1.新老节点的更新方案。 2.虚拟节点与真实节点映射。 3.实现新老节点的替换。 依赖收集 已经完成了Vue的两大核心部分：响应式数据和数据渲染，即完成了整个Vue的初始化流程： 当new Vue()时，执行_init初始化，通过m
阅读全文
摘要：下一个数 思路： 求出从最低位的1开始的连续的1的区间 将此区间全部变为0，并将区间左侧的那个0变为1 将第1步取出的区间右移，直到剩下的1的个数减少一个 将第2步和第3步的结果相或 /** * @param {number} num * @return {number[]} */ var find
阅读全文
摘要：虚拟DOM转化为真实DOM vnode虚拟节点创建真实节点，主要有以下几步： Vue原型方法_update的扩展。 patch方法：既有初始化的功能又有更新的逻辑。 createElm方法：根据虚拟节点创建真实节点。 _update方法： // 将vnode转化为真实dom Vue.prototyp
阅读全文
摘要：二进制转字符串 思路; 使用2成十进制小数，可以得到积，将积的整数部分取出，再用2乘余下的小数部分，又得到一个积，再将积的整数部分取出，依次继续。直到积中的整数部分为0，或者整数部分为1，此时0或1为二进制的最后一位。 例： 0.625=(0.101)B 0.625 * 2 = 1.25 取出整数部
阅读全文
摘要：根据render函数生成vnode 上文介绍 上面已经将模板编译成了render函数，下面就要使用render函数，从而完成渲染的操作： 首先，根据render函数生成虚拟节点；然后根据虚拟节点+真实数据生成真实节点。 实现mountComponent方法，完成渲染 虚拟节点生成 封装vm._ren
阅读全文
摘要：节点间通路 思路：邻接表+递归 实例：n = 3, graph = [[0, 1], [0, 2], [1, 2], [1, 2]], start = 0, target = 2 首先构建邻接表 0->1->2 1->2 然后对每一行递归，查看是否能到达。 此外：还需要创建一个visited记录是否
阅读全文
摘要：生成render函数 前言 上篇，生成ast语法树，而这篇使用ast语法树生成render函数。 export function compileToFunction(template) { // 1，将模板编译称为 AST 语法树 let ast = parserHTML(template); //
阅读全文
摘要：零矩阵 思路： 设置两个列表记录哪里需要置零，然后对其改变即可 class Solution: def setZeroes(self, matrix: List[List[int]]) -> None: """ Do not return anything, modify matrix in-pla
阅读全文
摘要：将模板编译成ast语法树 complileToFunction方法 vue数据渲染：template模板->ast语法树->render函数，模板编译的最终结果结果就是render函数。 在complileToFunction方法中，生成render函数，需要以下两个核心步骤： 通过parserHT
阅读全文
摘要：字符串压缩 思路： 使用双指针进行模拟即可 class Solution: def compressString(self, S: str) -> str: res = [] # i：左指针，j：右指针 i, j, ls = 0, 0 ,len(S) while i < ls: # 记数当前字符的连
阅读全文
摘要：解析模板参数 前言 在vue中，vue的初始化流程中，会做两件事： 状态初始化：实现数据的响应式 将数据挂载到页面上 因此后面就要实现将数据挂载到页面上。 export function initMixin(Vue) { Vue.prototype._init = function (options
阅读全文
摘要：数组的劫持 数组劫持的思路 对于数组劫持的目标是实现数组的响应式： 在Vue中，我们很少会使用索引进行操作数组，并且认为有七个方法能够改变数组： push、pop、splice、unshift、reverse，sort。所以，需要对七个方法进行特殊处理，是他们能够劫持到数组的数据变化，就能够实现数组
阅读全文
摘要：首个祖先 方法一：递归 三种情况： p、q分别在根节点的左右子树中，那么祖先就是root p、q均位于根节点的左子树或右子树中，那么祖先在root.left或者root.right中递归。 p、q的其中一个节点是根节点，祖先为root var lowestCommonAncestor = funct
阅读全文
摘要：对象响应式原理 初始化操作，扩展init方法： // index.js function Vue(options) { this._init(options) } initMixin(Vue) // 扩展了init方法 export default Vue 在initMinin方法中，扩展了init
阅读全文
摘要：回文排列 思路：回文排列的特征之一就是如果字符串中每个字符的个数都是两个，或者只有只有一个字符个数为奇数个。只有上述两种结果。 class Solution: def canPermutePalindrome(self, s: str) -> bool: // 将字符串转成个数字典 s_dic =
阅读全文
摘要：判定字符唯一 简短思路：使用Set()直接进行去重操作，然后判断原来的长度和现在的长度是否一致。 class Solution: def isUnique(self, astr: str) -> bool: // set去重 temp = list(set(astr)) // 判断长度 if len
阅读全文
摘要：npm init -y创建初始化package.json并修改script为"dev": "rollup -cw " 安装rollup及其插件: npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-d
阅读全文
