Niaogege

Vue Component 负责数据的渲染，Vuex 负责数据的状态管理，Vue Component 通过dispatch函数触发 Vuex 对应action函数的执行，action函数内部调用commit函数触发对应mutation函数执行，mutation函数可访问 Vuex 的 state 对象并对其进行修改，响应式的 state 数据在被修改后触发执行 Vue Component 的render函数的重载，从而把 state 数据更新到渲染视图。 vuex是啥Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化核心思想：通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护 单例模式的实践 基本使用123456789101112131415161718192021import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex ...

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同Options Api一、Options ApiOptions API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑 Composition Api组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合） 即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API 对比下面对Composition Api与Options Api进行两大方面的比较逻辑组织逻辑复用 组合优于继承 总结 在逻辑组织和逻辑复用方面，Composition API是优于Options API 因为Composition API几乎是函数，会有更好的类型推断。 Composition API对 tree-shaking 友好，代码也更容易压缩 Composition API中见不到this的使用，减少了this指向不明的情况 如果是小型组件，可以继续使用 ...

网络协议很基础，基础到平时开发中，你说用到吧也能用到，你说用不到也是，基本上只要接口能通，后端能返回数据前端基本就完事了，但作为一枚合格的前端开发工程师，了解基本的网络通信大有裨益 http什么是 HTTP 队头阻塞？从前面的小节可以知道，HTTP 传输是基于请求-应答的模式进行的，报文必须是一发一收，但值得注意的是，里面的任务被放在一个任务队列中串行执行，一旦队首的请求处理太慢，就会阻塞后面请求的处理。这就是著名的HTTP队头阻塞问题。 HTTP1.1 如何解决 HTTP 的队头阻塞问题？ 并发连接对于一个域名允许分配多个长连接，那么相当于增加了任务队列，不至于一个队伍的任务阻塞其它所有任务。在RFC2616规定过客户端最多并发 2 个连接，不过事实上在现在的浏览器标准中，这个上限要多很多，Chrome 中是 6 个。但其实，即使是提高了并发连接，还是不能满足人们对性能的需求。 域名分片一个域名不是可以并发 6 个长连接吗？那我就多分几个域名。比如 content1.sanyuan.com 、content2.sanyuan.com。这样一个sanyuan.com域名下可以分出非常多 ...

都不好意跟别人说自己写了两年的ts,就只会用any，任何数据都是用any搞定，any类型会使编译器放弃检验，等于自废武功，这是个非常不好的习惯，可惜在错误的道路上越走越远，现在难得有机会好好学习一下，总结最近学习ts心得，最重要的一点还是执行力，什么高级特性，只要你码起来，都不在话下，但就是从认知到敲代码中间差了几万八千里，我就是差了2年700多天(哇咔咔 这么惨), 学习ts的时候，一定要记住手写，要去实践，实践出真知！！！ 来点实际的吧 高级类型最好还是把源码都写下，加深印象，特别是常用的高级类型 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192// 以下所有案例基于此interface User { id: number; age: number; name: ...

RegExp表达式的方法exec1234567891011function render(template, data) { var reg = /\{\{(\w+)\}\}/ if (reg.test(template)) { const name = RegExp.$1.trim() // name = reg.exec(template)[1] template = template.replace(reg, data[name]) return render(template, data) } return template}// 测试render(`{{msg}}-{{name}}`, {msg: 'chendap', name: 'wmh'}) // chendap-wmh test 回文字符串123456789var isPalindrome = function(s ...

运算符自加和自减 ++x 和 x++Frist One1234var x = 1console.log(x)console.log(x++)console.log(++x) Second123456789let a = 0, b = 0;function fn(a) { fn = function fn2(b) { alert(++a+b); } alert(a++);}fn(1);fn(2); 对一个数进行加一、减一是最常见的数学运算符之一。 ++ 自减相当于给变量+1 123let counter = 2;counter++; // 和 counter = counter + 1 效果一样，但是更简洁alert( counter ); // 3 注意：自加/自减只能应用于变量。试一下，将其应用于数值（比如 5++）则会报错运算符 ++ 和 – 可以置于变量前，也可以置于变量后。 当运算符置于变量后，被称为「后置形式」：counter++当运算符置于变量前，被称为「前置形式」：++counter 所有的运算符都有返 ...

Composition API 将是 Vue 3 的核心功能，它具有许多更改和性能改进。我们可以在 Vue 2 中通过 npm 插件@vue/composition-api 使用它。本人重点将带你了解： @vue/composition-api常见 api 使用 vue3 代码逻辑提取和复用 如何使用provide+inject替代vuex方案 vue2 使用 composition-api主文件 main.ts 或者 app.vue 添加 123import Vue from 'vue'import VueCompositionAPI from '@vue/composition-api'Vue.use(VueCompositionAPI) Composition API 不再传入 data、mounted 等参数，通过引入的 ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。 核心语法reactive：接收一个普通对象然后返回该普通对象的响应式代理。 ref：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 ...

浏览器渲染页面的过程从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上： DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 主要说说第五个部分，即浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下面五个步骤： 处理 HTML 标记并构建 DOM 树。(dom) 处理 CSS 标记并构建 CSSOM 树。(cssom) 将 DOM 与 CSSOM 合并成一个渲染树。(render tree) 根据渲染树来布局，以计算每个节点的几何信息。(layout) 将各个节点绘制到屏幕上。(paint) 需要明白，这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM，下面就来看看它们的影响方式。 阻塞渲染：CSS 与 JavaScript现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM， ...

聚集核心,never give up!!! 浏览器相关的 [] 浏览器渲染原理 [] 同源策略和跨域 [] http缓存 网络相关 [] http1.0/http2.0/http3.0 [] tcp/udp [] tcp三次握手和四次挥手 [] https工作原理 [] cdn回源 vue源码 mvvm模式 vue双向绑定原理 $nextTick watch和computed 依赖收集 slot应用及原理 封装Vue.extend实例 手写vue-router 手写vuex vue3核心熟悉composition API css [] 清除浮动 [] flex [] BFC(如何触发BFC,渲染规则以及应用场景)什么是BFC webpack相关原理 构建过程 手写webpack 手写loader和plugin 热更新原理 分包策略(splitChunk) 打包流程优化 前端安全 [] xss [] csrf 设计模式 单例模式 策略模式 发布订阅模式 工厂模式 外观模式 装饰器模式 代理模式 迭代器模式 ts理解 int ...

前后端路由差别 前端路由解决的问题 前端路由实现原理 对比react和vue路由实现原理 实现hash路由和history路由 Vue-router路由模式有几种 实现一个简单的vue-router vue-router懒加载三种方式 路由导航守卫 其他细节问题 前后端路由差别 后端路由，切换路由时，服务端会去匹配并查找对应资源，返回给浏览器并渲染 前端路由, (spa)纯浏览器行为，是由浏览器控制的API(hash/history)，当打开一个spa页面后，切换路由，浏览器改变地址栏url并通过js展示对应页面(组件)，即通过浏览器提供的接口hash/history来实现前端路由！ 前端路由解决的问题凡是整个项目都是 DOM 直出的页面，我们都称它为“传统页面”（SSR 属于首屏直出，这里我不认为是传统页面的范畴）单页面应用都是通过JS渲染页面，比如这样 123456789<body> <div id="root"></div> <script type='text/javascript'> const root = ...