gongyexj-CSDN博客

原创 vue如何对数组做响应式的

你在面试中，有没有被问到vue是如何对数组做响应式处理的呢？1、找到响应式处理入口进入页面，Vue开始初始化，执行new Vue()，进入到Vue的构造函数中，在构造函数中执行了_init()方法。在_init()这个方法中，调用了initState()方法 => 在initState()方法中，调用了initData()方法 => 在initData()方法中，调用了observe()方法。observe()方法就是Vue进行响应式处理的入口。2、找到数组响应式处理入口在obser

2021-07-29 00:52:21 1281

原创 vue依赖收集的具体时机

有没有面试官问过你，vue的依赖收集是在什么时候进行的？在面试官的灵魂拷问下，整理出了这篇文章。1、首先，了解下vue生命周期函数vue生命周期分为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed官网对这个已经解释的很清楚了：实例生命周期钩子2、从源码层面走个流程找到依赖收集的具体时机1> 进入页面，Vue开始初始化，执行new Vue()，进入到Vue的构造函数中，在

2021-07-22 23:28:25 1268 2

原创 Vite学习笔记

一、法语：快1、是一个面向现代浏览器的更轻、更快的Web应用开发工具2、使用浏览器原生支持的ES Module，在开发模式下不需要打包，提升开发速度3、vue-cli 开发模式下必须对项目打包才可以运行二、Vite优点1、快速冷启动2、按需编译3、模块热更新4、生产环境使用Rollup打包，基于ES Module打包，体积小5、开箱即用（TypeScript 内置支持、less/sass/stylus/postcss 内置支持、JSX、Web Assembly）PS：使用Webpack

2021-07-05 00:40:54 306

原创从0-1生成并部署静态网站

这里我们由浅及深，从0到1生成并部署我们自己的静态网站。这里我们使用静态站点生成器 Gridsome 快速生成静态网站一、关于 Gridsome1、Gridsome 是什么？Gridsome 由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。 Jamstack使您可以通过预渲染文件并直接从CDN直接提供文件来构建快速安全的站点和应用程序，而无需管理或运行Web服务器。Gridsome为每个页面构建一个.html文件和一个.json文件。加载第一页后，它仅使

2021-06-28 22:38:28 237 2

原创深入学习vue-ssr2

前面我们已经对vue的服务端渲染有了一定的认识，并且对vue-ssr的构建配置有了一个基本的思路。前置知识参见：从0-1学习vue-srr，深入学习vue-ssr接下来我们根据前面讲述的基本思路开始学习如何进行一系列的操作，将页面赋予动态交互的能力，并且具备完成企业级项目开发的能力。PS：本案例源代码仅供参考：源码地址一、项目源码结构一个项目，肯定要有自己的目录，即源码存放的结构，这一点在官网中也已经介绍的很清楚了，这里不再赘述，官网介绍参见：源码结构src├── components│

2021-06-22 01:26:06 157

原创深入学习vue-ssr

前面我们讲了如何创建一个最简单的vue-ssr案例，相当于vue-ssr的一个Hello World。参见：从0-1学习vue-srr接下来我们开始深入学习一下 vue-ssr…一、html模板服务端渲染主要是在服务端这一块，完成页面模板和动态数据的拼接，所以我们需要用到html模板，然后将从数据库查询到的数据动态的和html模板进行拼接，然后发送给客户端浏览器，这一块我们就先完成一个html模板的学习。1、首先需要创建一个model.html模板文件，不然也是巧妇难为无米之炊PS: 使用{{}}

2021-06-20 00:52:54 169

原创从0-1学习vue-ssr

准备工作：创建项目文件夹 vue-ssr初始化package.json：npm init -y安装依赖：npm i vue vue-server-renderer一、首先我们先来渲染一个 Vue 实例1、创建server.js，如下：// 加载 vueconst Vue = require('vue')// 加载 vue-server-renderer 中的 createRenderer 方法const renderer = require('vue-server-renderer').c

2021-06-19 22:53:37 103

原创 nuxtjs 项目自动部署

介绍：最简单的部署方式发布部署步骤：1、配置 Host + Port2、压缩发布包3、解压4、安装依赖5、启动服务一、手动部署项目第一次连接服务器并发布项目1、配置 Host + Port// nuxt.config.js 中server: { host: '0.0.0.0', // 监听所有地址 port: 3000},2、压缩发布包（.nuxt文件夹，static文件夹，nuxt.config.js，package.json，package-lock.json）这里根据

2021-06-01 00:08:56 451

原创手写一个简单的Vuex

这里我们实现一个简单的Vuex，Vuex的基础知识不再赘述，参见官网。Demo源代码参见：Github一、要实现的一个简单的小例子目标：实现state（初始值 count: 0, msg: 'Hello World' ）、getters（翻转 msg 的方法）、mutations(给 count 增加2的方法）、actions(给 count 增加5的方法），其他功能本次不实现store/index.js 中：import Vue from 'vue'import Vuex from 'Vue

2021-05-23 16:39:19 112

原创 Vue 中模板编译的过程（源码分析）

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue中模板编译的过程（从源码的角度）。每天进步一点点。一、图解：二、文字解释：1、模板编译的入口函数 compileToFunctions；2、在 compileToFunctions 函数中，首先判断缓存是否存在编译好的render函数，如果存在直接返回，如果不存在调用 compile 函数开始进行模板编译；3、在compile 函数中，首先合并选项，将编译过程中遇到的一些错误、警告和提示存储起来，然后调用 baseCompi

2021-05-18 22:44:54 200

原创虚拟 DOM 中 Key 的作用和好处

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下 Vue 虚拟 DOM 中 Key 的作用和好处。每天进步一点点。1、使用key可以最大程度的重用DOM，减少DOM操作；2、在具有相同父节点的时候，使用key可以避免渲染错误，最常见的用例是结合 v-for；3、用于强制替换元素/组件而不是重复使用它，比如给span标签设置key，当文本内容改变，总是会被替换而不是被修改，因此会触发过渡。在调用 patchVnode 进行新旧节点对比时，如果新旧节点都存在子节点，则调用 up

2021-05-18 22:41:42 397

原创 Vue 响应式原理（源码分析）

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue响应式原理（从源码的角度）。每天进步一点点。数据响应式是指，当数据发生变化自动更新视图，不需要手动操作dom一、入口，initState(vm)整个响应式是从init方法中开始的，在init方法中，调用initState方法初始化状态，这里我们主要关注的data的初始化。入口调用 initState(vm) 所在位置：src/core/instance/init.jsinitState 函数定义位置：src/core/inst

2021-05-18 22:33:46 187

原创 Vue 首次渲染的过程（源码分析）

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue首次渲染的过程（从源码的角度）。每天进步一点点。一、图解：二、文字解释：1、首先进行Vue的初始化初始化Vue的实例成员以及静态成员；初始化全局指令v-model和v-show，全局组件Transition和TransitionGroup；在Vue原型上挂载 __path__ 和 $mount 方法；重写 $mount 方法，并挂载 compile方法。2、当初始化结束之后，开始调用Vue构造函数在构造函数中调

2021-05-18 22:30:02 238

原创 Vue-Router 原理实现

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue-Router 原理实现的相关知识。每天进步一点点。一、Vue-Router 基础知识**1、Vue.use()方法：**接收一个参数，如果传入的参数是一个函数，直接调用这个函数；如果是一个对象，就调用这个对象的install方法。2、在初始化Vue实例的时候传入 router，Vue实例中会生成route和route和route和router两个属性：route中存储了当前的路由规则，route 中存储了当前的路由规则，rou

2021-05-01 16:29:55 412

原创前端工程化

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化的相关知识。每天进步一点点。前端工程化概述写在前面：前端工程化就是为了提高开发者的工作效率，降低项目维护成本，从而更好的适应大前端时代下的前端开发工作。以下主要以前端工程化为主题，分别从脚手架工具、自动化构建、模块化开发、规范化标准四个维度介绍前端工程化具体该如何落地、如何实践，以此应对复杂前端应用的开发和维护过程。一、工程化的必要性技术是为了解决问题而存在的，前端工程化解决的一些问题：1、传统语言或语法的弊端没有前端工

2021-04-20 01:00:03 128

原创前端工程化之规范化标准

规范化标准在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于规范化标准的相关知识。每天进步一点点。一、规范化概述规范化是我们践行前端工程化中重要的一部分。1、为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准2、哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要3、实施规范化的方法编码前人为的标准约定通过工具实现 Lin

2021-04-20 00:49:34 403

原创前端工程化之模块化开发

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于模块化开发的相关知识【以Webpack5 为主】。每天进步一点点。文章总计字数29149有点长，建议收藏，拿去吃灰也不错一、模块化演变过程1、Stage-1 文件划分方式污染全局作用域、命名冲突问题、无法管理模块依赖关系这种原始方式完全依靠约定，项目上了体量就会出现各种问题2、Stage-2 命名空间方式在第一阶段的基础上，将每个模块包裹成一个全局对象的方式存在解决了命名冲突的问题，但是这种方式没有私有空间模

2021-04-18 17:32:52 550

原创 8句话简述js中的this和原型链

又遇到了this和原型链的面试题，每次总是绕进去，简单总结下：搞懂this一共5句话，搞定原型链只需3句。什么是this：张三【执行主体】在CSDN【执行上下文】分享前端知识【函数/事件】。this就是触发函数/事件执行的执行主体5句话基本包含各种使用情况：1、事件绑定中的this: 一般就是绑定事件监听的DOM元素2、普通函数调用中的this: 依据点来判断【没有点，this指向window或者global，严格模式下指向undefined】3、构造函数中的this： new 的实例

2021-04-11 17:15:04 87

原创前端工程化之自动化构建

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于自动化构建的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。一、自动化构建简介自动化构建就是把我们开发阶段写出来的源代码，自动化的转换成生产环境中可以运行的代码或者程序，这个自动化转换的过程称为自动化构建工作流。它的作用是尽量脱离运行环境兼容带来的问题，在开发阶段使用一些提高效率的语法，规范和标准，例如，ES6+、Sass、模板引擎等。二、自动化构建初体验这里引入进阶__前端漫漫路写的自动化构建的

2021-04-05 09:52:44 236

原创前端工程化之脚手架工具

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于脚手架的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。一、脚手架的工作原理及作用1、脚手架是前端工程化的发起者，它可以自动创建项目基础解构，提供项目规范和约定2、脚手架工具的工作原理其实很简单，在启动脚手架之后，它会自动的询问一些预设的问题，然后将你回答的问题结合模板文件生成项目的结构3、在搭建新项目的时候，项目中会有一些相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码。使用

2021-04-03 19:57:58 657

原创 JavaScript 性能优化实例

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下JavaScript 性能优化的相关实例，文章有点长，希望对大家有所帮助。每天进步一点点。一、基础知识关于JavaScript 性能优化的基础知识参见 JavaScript性能优化二、代码优化实例1使用工具精准测试 JavaScript 性能：工具1链接、工具2链接本质上就是采集大量的执行样本进行数学统计和分析PS：最近上面这两个工具经常大姨妈.1、慎用全局变量// 为什么要慎用// 全局变量定义在全局执行上下文，是所有作

2021-04-01 00:36:19 116

原创一段代码详解JS在堆栈中的执行过程

从下面这个面试题代码详解JavaScript在堆栈中的执行过程let a = 10function fn1(b) { let a = 2 function fn2(c) { console.log(a + b + c) } return fn2}let fn3 = fn1(2)fn(3)简述JavaScript代码在堆栈中的执行过程：1、JavaScript代码在开始执行之后，会在堆内存中创建执行环境栈，用它来存放不同的执行上下文2、代码从上向下开始执行，最

2021-03-31 00:37:55 298

原创 JavaScript 性能优化

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下JavaScript 性能优化的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。一、性能优化简介1、不可避免随着软件开发行业的不断发展，性能优化已经是一个不可避免的话题。从初、中级工程师，到高级、资深工程师，以及技术专家，可以说每个人都在谈性能优化。2、什么是性能优化任何一种能够提高运行效率，降低运行开销的行为都可以看做是优化操作3、前端性能优化请求资源时所用到的网络以及数据的传输方式，开发过程中所用

2021-03-29 21:11:47 91

原创 TypeScript语言规范与基本应用

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下对TypeScript相关知识的学习，文章有点长，希望对大家有所帮助。每天进步一点点。一、TypeScript介绍TypeScript：JavaScript + 类型系统 + ES6+ TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。 TypeScript是JavaScr

2021-03-28 00:00:07 594 1

原创 JavaScript与Flow

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下对JavaScript类型系统与Flow 相关知识的学习，希望对大家有所帮助。每天进步一点点。一、编程语言的分类1、从类型安全角度可以把编程语言分为强类型和弱类型。强类型语言在语言层面就限制了函数的实参类型必须与形参类型相同，并且不允许任意的数据隐式类型转换；弱类型语言不会限制实参的类型，并且允许任意的数据隐式类型转换。2、从类型检查（类型系统）角度可以把语言分为静态类型和动态类型对于静态类型语言而言，一个变量在声明时它

2021-03-27 23:53:01 451

原创 ES6新特性

一、ECMAScript和JavaScript 实际上JavaScript是ECMAScript的扩展语言，ECMAScript只是提供了最基本的语法（约定了代码该如何编写，例如怎样定义变量和函数，如何实现循环语句等）。JavaScript实现了ECMAScript标准，并且在这个基础上进行了扩展，使得我们可以在浏览器中操作DOM和BOM，在Node环境中进行读写文件等操作。在浏览器环境中，JavaScript = ECMAScript + Web APIs【BOM/DOM】在Node环境中，Ja

2021-03-24 17:31:06 206

原创 JavaScript异步编程

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下对JavaScript异步编程相关知识的学习，文章有点长，希望对大家有所帮助。每天进步一点点。1、背景知识在最早的时候JavaScript就是运行在浏览器端的语言，主要目的是为了实现页面上的动态交互。实现页面交互的核心就是DOM操作，决定了它必须使用单线程模型，否则就会出现很复杂的线程同步问题。如果在JavaScript中有多个线程，一个线程修改了这个DOM元素，同时另一个线程删除了这个元素，此时浏览器就无法明确该以哪个工作线程为准。所

2021-03-20 16:05:10 55

gongye2019的博客