Jungle

响应式系统的基本原理响应式系统Vue.js 是一款 MVVM 框架，数据模型仅仅是普通的 JavaScript 对象，但是对这些对象进行操作时，却能影响对应视图，它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」，但是理解它的实现有助于避开一些常见的「坑」，也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。 Object.defineProperty首先我们来介绍一下 Object.defineProperty，Vue.js就是基于它实现「响应式系统」的。 首先是使用方法： 12345678/* obj: 目标对象 prop: 需要操作的目标对象的属性名 descriptor: 描述符 return value 传入对象*/Object.defineProperty(obj, prop, descriptor) descriptor的一些属性，简单介绍几个属性，具体可以参考 MDN 文档。 enumerable，属性是否可枚举，默认 false。 configurable，属性是否可以被修改或者 ...

文章转载自看云《剖析vue.js内部运行机制》 Vue.js 运行机制全局概览全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程，当把整本小册认真读完以后，再来阅读这一节，相信会有收获的。 首先我们来看一下笔者画的内部流程图。 大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对Vue.js内部运行机制会有一个大概的认识。 初始化及挂载 在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」， ...

在Vue项目中封装echarts 文章目的：在vue项目中使用echarts针对相同类型的数据渲染，无法定位渲染id和繁琐问题 先看效果图 下载依赖1npm install echarts 在main.js中引入依赖12// 引入echartsimport * as echarts from 'echarts'; 在公共的方法文件夹中创建echarts.js文件代码如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182// @/util/echarts.jsexport default class { // echarts, id, seriesdata,answerTotal都是vue组件中传递过来的参数 constructor(echarts, id, seriesdata, ...

自我介绍 & 项目介绍从用户输入URL到看到页面，这个过程中都发生了什么？ defer & async 的区别 defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。 一句话，defer是“渲染完再执行”，async是“下载完就执行”。 另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。 为什么加载同步script标签中的内容会阻塞文档渲染？JavaScript是单线程的语言。 单线程意味着什麽呢？意味着一次只能干一件事。这条线程，被JavaScript的执行和浏览器的渲染所共享（也就是说两者用的均是这一条线程，浏览器在某个时间点只能执行JS或渲染UI一个动作）。 CSS盒模型 对BFC语法规范的理解？BFC（Block Formatting Context）：块级格式化上下文。可以把它理解成一个独立的区域 另外还有个概念叫IFC（IFC的line box（线框高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的pa ...

vue3 相比 vue2 的十项优点 本文章转载自华为云社区《【云驻共创】vue3 相比 vue2 的十项优点》，作者：海拥 Vue3新版本的理念成型于 2018 年末，当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，Vue3在2020年正式推出，在源码和API都有较大变化，性能得到了显著的提升，比Vue2.x快1.2~2倍。 其中，一些比较重要的优点有： diff算法的优化；hoistStatic 静态提升；cacheHandlers 事件侦听器缓存；ssr渲染；更好的Ts支持；Compostion API: 组合API/注入API；更先进的组件；自定义渲染API；按需编译，体积比vue2.x更小；支持多根节点组件等。下面我们就来具体说说vue3 的优点： 优点1：diff算法的优化vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会一层一层比较，这就浪费了大部分事件在对比静态节点上） vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前 ...

[基于Koa2框架的简单项目搭建及实战开发]前言Koa是基于 Node.js 平台的下一代 web 开发框架，由express原班人马打造，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。 此文是简单介绍使用kos2进行项目的基本搭建以及api的简单开发 搭建环境1、Koa框架是基于node.js的，安装node是必须进行的第一步，这里就不在赘述了 2、安装koa（推荐使用淘宝镜像进行安装） 1cnpm install koa --save 3、全局安装Koa2的项目生成器 1cnpm install koa-generator -g 4、创建一个项目 1koa2 myProject 5、进入这个项目文件夹，下载依赖包 12cd myProjectcnpm install koa2 myProject 是用来生成项目的几门架构的 ...

[Koa2核心（洋葱圈模型）简介和实践理解]简介Koa2概述: 基于Node.js平台的web开发框架 由Express原班人马打造：Express Koa Koa2 async/await 要求环境依赖Node v7.6.0及以上 Koa2特点 支持 async/await 洋葱模型中间件：当客户端发起一个请求到达第一层中间件并处理后，服务器处理请求，将处理结果传递给第二层中间件，到达第二层中间件后再处理，再将处理结果传递给第三层中间件，之后再进入第三层中间件处理；第三层处理后，依次将处理结果向上返回给第二层处理、第一层处理，最后第一层再响应给客户端 二、快速上手 检查Node的环境，要求环境依赖Node v7.6.0及以上 　　　　node -v 安装Koa 　　　　npm init -y 　　　　npm install koa 创建并编写app.js文件 　　　　1.创建Koa对象 　　　　2.编写相应函数(中间件) 　　　　3.监听窗口 1234567891011121314151617181920212223242526//创建koa对象const ...

vue中使用vue-qr生成并下载二维码最近在项目中遇到一个生成二维码的需求，并且二维码上要带上logo和背景。 另一种二维码生成qrcode只能单纯的生成二维码，不能带logo及其它一些自定义。 于是选择了vue-qr。它具有自定义二维码背景、logo、实点颜色等等特性，能够生成更炫酷的二维码。 vue中使用vue-qr生成二维码安装1npm install vue-qr --save 实践123456789101112131415161718192021222324<template> <div class="basic-setting"> <el-row> <div id="qrcode"> <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc=&q ...

elementui中gutter和offset的区别 gutter是指栅格间间隔，offset是指栅格左侧的间隔格数 分栏间隔el-row配置行，el-col配置列，像是一个个单行的表格 el-row上的属性gutter，默认值为0，可以设置大于0的任意数字 在PC端，设置的这个gutter值为该单元格左右的padding之和 123456<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid ...

总结：内卷不但不会创造价值，而且会危害每一个人。 不知道从什么时候开始，“内卷”这个概念变得很火炎焱燚。 什么是内卷？什么是内卷化？内卷究竟卷的是什么？众说纷纭。 随着网络的发酵，“内卷”的使用场景不断扩大，“万物皆可内卷”。人们对内卷这个概念原本的语义价值已经不太在意，更多只是用来描述当下的“难”，借以表达对各自行业和处境的不满。 内卷，渐渐成为“标签化”的情绪攻讦。 如此，就太可惜了。我们连最开始讨论“内卷”的意义都失去了。 我们需要的是，冷静地审视“内卷”：社会的内卷，个人的内卷；更需要的是，冷静地思考：内卷之下，如何寻求突破？ 但无论如何我们都要去清楚的了解，什么才是“内卷”！1. 什么是内卷很久很久以前，地球上有一个小镇。小镇上有很多鞋店，这些鞋店每天上午10点开门，中午12点到下午2点午休，下午2点到晚上6点继续营业；每周一至周五营业5天，周末休息。 天最热的那几天，鞋店老板们会纷纷把店关掉，去南方的海边度假；冬天最冷的那几天，鞋店老板们也会纷纷把店关掉，去北方的山里滑雪。 多年以来，小镇上的常住人口没有什么变化，鞋的品质一直优秀，供货也稳定，所以，小镇上的鞋的供需关系 ...