随笔分类 - 前端框架
jq & vue & react 等等等
摘要：nginx 转发的问题导致 vue ssr 出错 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render.
阅读全文
摘要：前言 我们都知道 React 组件绑定事件的本质是代理到 document 上，然而面试被问到，为什么要这么设计，有什么好处吗？ 我知道肯定不会是因为虚拟 DOM 的原因，因为 Vue 的事件就能挂载到真实的 DOM 节点。所以继续往下探究吧 React 模拟 DOM 事件冒泡的原理 设有一段代码如
阅读全文
摘要：答案：主要是为了提升同级的比较效率的。 借用我在博客上另外一篇 Vue 2 渲染过程的图 其中核心比对逻辑就是新老节点头对头，头对尾，尾对头，尾对尾，都判定非 sameVnode，则拿着 key 去比对，若其中有被判定为 sameVnode，则复用节点。反之需要删除后再添加新节点。 function
阅读全文
摘要：vue 3 使用了 proxy api，有些手痒，就弄一个简单的结构玩玩吧。Proxy API 见 MDN Proxy 效果图 思路 依赖收集：Mvvm 初始化时劫持数据，并设置观察者 dep。模仿 vue 结构是在 get 时往观察者 dep 推入被观察者 watcher，然后 set 时让观察者
阅读全文
摘要：面试提问：说说 vue 父子组件加载顺序 这我知道答案 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted 父 mounted 子组件若有 props 的话更新顺序是四步，若无
阅读全文
摘要：$ npm start Vue packages version mismatch: - vue@2.4.2 - vue-template-compiler@2.5.1 vue 版本和 vue-template-compiler 的版本必须一致，否则就会报以上的错，解决方案其实很简单 # 如果你的v
阅读全文
摘要：在 "尤雨溪 聊聊 Vue.js 3.0 Beta 官方直播完整版 2020 04 21" 里我发现了一个有意思的工具，输入模板展示它编译优化的结果，网址在这里：https://vue next template explorer.netlify.app/ 留意图片中，注意动态的 的注释。识别 _o
阅读全文
摘要："github 链接在这里" jqfree this is an imitation jquery, it has fewer fuctions, but only 400+ lines of code. jqfree can not be used in project, we just take
阅读全文
摘要：Vue 和 React 的核心差异 用 Evan you 的话说：双向绑定是对表单来说的，表单的双向绑定，说到底不过是 value 的单向绑定 + onChange 事件侦听的一个语法糖。 这个并不是 React 和 Vue 在理念上真正的差别体现。同时，单向数据流不是 Vue 或者 React 的
阅读全文
摘要：简述 监听hashchange方法 进行地址匹配，得到对应当前地址的 route。 将其设置到对应的 vm._route 上。侵入vue监听_route变量而触发更新流程 最后是router view组件调用render函数渲染匹配到的route 测试代码 怎么注入进的 vue 一个 install
阅读全文
摘要：环境和测试代码 vue 2.6.11, vuex 3.1.3 总结 侵入每个 vue 组件注册了 $store 属性，而所有 $store 属性都指向一个 store 实例，这样就能做到所有 vue 组件访问的都是同一份全局变量。 vue 组件里用户定义取 store 上的变量用于渲染或者其他逻辑，
阅读全文
摘要：前置说明 vue 版本 2.6.2，测试用的代码 简要概括 在拦截器(Object.defineProperty)里，在它的闭包中会有一个观察者(Dep)对象，这个对象用来存放被观察者(watcher)的实例。 并且拦截器注册 get 方法，该方法用来进行「依赖收集」。其实「依赖收集」的过程就是把
阅读全文
摘要：概述 compile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。这部分内容不算 Vue.js 的响应式核心，只是用来编译的，笔者认为在精力有限的情况下不需要追究其全部的实现细节，能够把握如何解析的大致流程即可 举例 入口
阅读全文
摘要：周所周知，Vue在2.0版本中去除了$broadcast方法以及$dispatch方法，最近在学习饿了么的 "Element" 时重新实现了这两种方法，并以minix的方式引入。 看一下 "源代码" 其实这里的broadcast与dispatch实现了一个定向的多层级父子组件间的事件广播及事件派发功
阅读全文
摘要：场景 vue 版本 2.3.0 早上起来新建个项目写单测的时候发现报出一个错误 runtime only ? 这是什么情况，我只是在单测代码里构建了一个 vm 对象啊，写入了 import Vue from 'vue'; let vm = new Vue({ template: ` {{ text
阅读全文
摘要：提问 Vue 2.x 里劫持对象仍用 Object.defineProperty() 方法，受此方法的限制，Vue 无法检测到直接数组更改（mobx 旧版本也有过这毛病，他对数组0到999项的内容都现实地 Object.defineProperty 监听了），和对象属性的添加或删除。 举个例子，运行
阅读全文
摘要：背景 很多人对 process.nextTick() 有个误解，认为它也是前端常用的微任务，但其实不是。 这个方法只是在 Node 中存在，并且是个 Node 进入事件轮询的下一阶段时就会触发的一个神奇的方法。 那么问题来了，Vue 中也实现过一个 this.$nextTick()，这是怎么做的呢？
阅读全文
摘要：面试时被问到，那就趁机梳理一下 vue 的演进吧 vue2 比 vue1 的改进 详见 "从Vue 1.x 迁移" 生命周期 比如说 beforeCompile 移除， 使用 created 替代，compiled 移除，使用 mounted 替换等 语法 新数组语法 (value, index)
阅读全文
摘要：原理 computed 本质是一个惰性求值的订阅者。data 属性的 Observer 挂在 属性下，而 computed 属性挂在 下。而发布者 Dep 里存放了两个订阅者，而和computed相关的订阅者，其实只做了一件事情，标记 dirty 为 true，等待 get 时再真正计算。 comp
阅读全文
摘要：测试例子 主要函数定义 716：Dep 发布者定义 767：Vnode 虚拟节点定义 922：Observer 劫持数据的函数定义 4419：Watcher 订阅者定义 5073：function Vue() 定义 数据劫持过程 Vue.prototype._init 中，在 后和 之前调用 ini
阅读全文
浙公网安备 33010602011771号