![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
粗笔记
文章平均质量分 66
保护我方澄澄
这个作者很懒,什么都没留下…
展开
-
3-3-1vuex 状态管理
1.目标vue组件间通信方式回顾vuex核心概念和基本使用回顾购物车案例模拟实现vuex学会vux 是什么 怎么使用 原理2.组件内状态管理流程vue 核心功能 数据驱动 和 组件化state 状态: 数据 data 需要绑定到视图view 视图: 模板action 动作: 修改方法 修改数据要更新视图3.通信方式–父组件给子组件传值1.父组件给子组件传值2.子组件给父组件船只3.不相干组件传值 父组件给子组件传值 子组件通过prop原创 2021-05-22 22:08:51 · 109 阅读 · 0 评论 -
2-1-3自动化构建
1.自动化构建 通过机器代替手工,将开发写的源代码 自动化转换成生产环境的生产代码提高 语法 规范 标准SassECMAScript但是用法不被浏览器支持 所以需要 自动化构建工具2.自动化构建的通过Sass增加css的编程性.scss文件 通过sass模块来构建编译由于重复的命令使 操作难搞将其他模块中多次重复的发杂指令 整合到 npmscripts命令可以方便使用 代替目标动作指令NPM Scripts 实现自动化构建最方便的工具3,常用的自动化构建工具G原创 2021-05-21 03:02:08 · 265 阅读 · 0 评论 -
2-1-2脚手架工具
1.脚手架工具的概述脚手架 即 自动创建项目基础文件的工具不仅文件 约定和规范骨架: 组织结构 开发范式 模块依赖 工具配置 基础代码 IDE 创建项目的过程就是 创建骨架 过程前端脚手架 一般不集成某个IDE 而是独立的工具 为了解决创建项目的过程中 复杂的工作 内容: 1.脚手架的作用 概念 2.常用的脚手架工具 实例 3.通用脚手架工具解析 解析 4.开发脚手架 开发2.常用的脚手架工具一般只使用本身框架vue-cli原创 2021-05-21 03:00:59 · 202 阅读 · 0 评论 -
1-2-3(下)js性能优化
1.JSBench的使用测试js执行效率的网站只用一个标签也测试 ,执行代码的时候停留在页面多执行继承 取高概率事件2.堆栈中的js执行过程ESStack 执行环境栈 |AB1 堆| | function foo(b){'''}| ... name : foo| ... length : 1| EC(baz):函数开辟的全局上下文 this window原创 2021-05-21 02:56:00 · 190 阅读 · 0 评论 -
1-2-3(上)js性能优化
1.js优化概述1.1内存管理1.2垃圾回收和常见GC算法1.3V8引擎的垃圾回收1.4Performance工具1.5代码优化实例2.js内存管理性能一路升高 导致 内存泄漏内存:可读写单元组成,表示一片可操作空间管理:开发者主动去操作一片空间的申请、使用和释放申请内存空间 let bb = {}使用内存空间 bb.name = 'hzj'释放内存空间 bb = null3.js的垃圾回收js的内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问时是垃圾(语法原创 2021-05-21 02:54:45 · 79 阅读 · 0 评论 -
1-2-2(下)TypeScript语言
1.ts概述包含 js+ES6+类型系统可以编译成js任何一种js运行环境都支持ts开发比flow功能更强大 更完善Angular/Vue.js前端领域的第二语言适合长周期大项目缺点: 本身多了很多概念 项目初期 ts会增加一些成本2.ts上手提供了强大的类型系统3.ts配置文件4.原始类型stringnumberboolean以上允许为nullvoid undefinednull nullundefinedsymbol symbol()原创 2021-05-21 02:52:55 · 109 阅读 · 0 评论 -
1-2-2(上)FLOW概述
1.用ts解决js自有类型系统的问题强类型和弱类型静态类型和动态类型js自有类型系统的问题Flow静态类型检查方法 小工具TS的语言规范和基本应用2.类型系统 —强类型和弱类型 (类型安全)2.1强类型 更强的类型约束 不会有隐式数据类型转换实参类型和形参类型必须完全相同2.2弱类型不会限制实参的类型 语法上不存在问题 运行可能有问题js是弱类型语言python是强类型语言3.静态类型和动态类型 (类型检查) strong3.原创 2021-05-21 02:51:55 · 611 阅读 · 0 评论 -
1-2-1ES6新特性
1.let和块级作用域在块级作用域 {}中用let声明的变量为局部变量1.2 var声明的对象在代码层次上,可以在声明前调用,不会报错,属于程序员的bug’console.log(x)var x = 1;1.3 const声明对象的内存地址不可修改const a = {}a.name = ‘aa’a = {} 报错1.4 即最好少用var var为最初定义的语法主用const辅用let1.5 数组的解构 反向定义固定次序提取const arr = [1,2,3]c原创 2021-05-21 02:49:43 · 128 阅读 · 0 评论 -
1-1-3手写promise源代码
1.promise的执行顺序是1.执行声明函数2.执行声明函数里的方法3.执行promise里的then方法 4.执行外面的then方法2.异步调用多个then函数存储回调函数的结果 最后再使用shift 取数组里的第一个元素且删除第一个元素3.链式调用新增判断4.then方法不能返回自己我认为是防止死循环5.捕获错误this 是当前 没有则是下一个proimse .then里捕获异常 则应该是下一个捕获异常6.总结:promiseresolvereject原创 2021-05-21 02:46:40 · 190 阅读 · 0 评论 -
1-1-2js的异步编程
1.并行执行promise.all方法var promise = Promise.all([ajax(’/api/users.json’),ajax(’/api/posts.json’)])如果有任何一个失败 就也失败了 这是串行的 和链式的不同如果有全部完成就完成了promise.race()方法有一个结果就完成了eg:如果在规定时间未结束 则失败2.宏任务和微任务settimeout是宏任务promise是微任务3.generator 异步方案yi原创 2021-05-21 02:45:47 · 184 阅读 · 0 评论 -
1-1-1函数式编程
1.1函数式编程由React引起函数式编程的关注即最基本的方法VUE3也使用函数式编程可以抛弃this方便测试和并行处理由一些库可以帮助我们使用函数式编程 较为成熟1.2函数式编程的概念对运算过程进行抽象根据输入通过运算得到某种输出y=f(x)即是指x和y的关系 x和y可以是数据或函数相同的输出始终得到相同的输出(纯函数)可以让代码进行重用//非函数式let num1=2;let num2=3;let sum=num1+num2;console.log(sum)//函数原创 2021-05-21 02:40:17 · 179 阅读 · 0 评论 -
3-3-3nuxt案例
1.案例 realworldvue使用经验nuxt基础node webpack基础收获 掌握使用nuxt.js开发同构渲染应用 增强vue.js实践能力 掌握同构渲染应用中常见的功能处理 用户状态管理 页面访问权限处理 seo优化 。。。 掌握同构渲染应用的发布和部署 webpack2.创建目录初始化项目安装nuxt修改配置命令 nuxt3.导入页面模板导入样式资源cdn工具 引用国内 或者下载好配置布局组件公共的头部和底部 配置layout原创 2021-05-18 01:34:09 · 329 阅读 · 0 评论 -
3-3-2服务端渲染基础
1.概述单页面应用 优缺点优点1.用户体验好2.开发效率高3.渲染性能好4.可维护性好。。。 缺点 1.首屏渲染时间长 2.不利于SEO1.nuxt.js介绍构建同构应用集成了 vue2vue-routervuexvue服务器渲染 mode: spavue-meto 使用 webpack wue-loader babel-loader 服务端渲染 ssr 单页应用程序 spa 静态化 预渲染2.nuxt.js构建 – 路由.nuxt下的原创 2021-05-18 01:33:12 · 59 阅读 · 0 评论 -
3-2-3模板编译和组件化
1.模板编译介绍将模板转化为渲染函数作用:使用Vnode描述视图以及各种交互,用户自己编写vnode比较复杂用户只需要编写类似html的代码 -vue.js模板,通过编译器将模板转换为返回vnode的render函数.vue文件会被webpack在构建的过程中转换成render函数2.体验模板编译结果function render(){ with(this){return _c(tag ‘div’, createElement(vm, a, b, c, d, false)原创 2021-04-24 03:50:42 · 153 阅读 · 0 评论 -
3-2-2虚拟dom源码分析
1.虚拟dom 课程回顾1.虚拟dom库 snabbdom2.vue.js响应式原理模拟实现3.vue.js源码解析- 响应式原理2.虚拟dom概念回顾1.什么是虚拟dom是使用js对象描述真实dom 本质是js对象操作作用到虚拟dom 映射到真实dom vue.js中的细腻dom借鉴snabbdom。并且添加了vue.js的特性 例如指令和组件机制 2.为什么使用虚拟dom 1.避免直接操作真实dom 不去想浏览器兼容问题 提高开发效率 2.作为一个中间层可以跨平台原创 2021-04-24 03:50:11 · 82 阅读 · 0 评论 -
3-2-1vue响应式数据源码
1.Vue源码解析 --响应式原理最好不要太看重细枝末节 支线 主要看主线vue.js静态成员和实例成员初始化过程首次渲染过程数据响应式原理2.准备工作Vue源码的获取分析Vue2.6新版本发布后 一段过渡时期dist 打包后的结果examples 示例src 源码部分compiler 编译器 模板转换成 vnode函数corecomponetsglobal-apiinstance vue的实例observer 响应式数据vdom 虚拟dom 功能区原创 2021-04-24 03:47:07 · 387 阅读 · 0 评论 -
3-1-1Vue大概认知
1.Vue.js基础回顾1.回顾Vue.js基础语法2.Vue Router原理分析与实现3.虚拟DOM库 Snabbdom 源码分析4.响应式原理分析与实现5.Vue.js源码分析2.Vue.js基础结构new Vue({el: ‘#app’,data: {company: {name: ‘拉勾’,address: ‘中关村创业大街籍海楼4层’}}})3.Vue的生命周期new Vue()初始化事件&生命周期beforeCreate 钩子 初始化 注原创 2021-04-20 11:23:26 · 87 阅读 · 0 评论 -
3-1-2Vue-Router原理实现
1.课程目标实现vue模拟一个最小版本的Vue响应式原理在面试的常见问题学习别人优秀的经验,转换成自己的经验给Vue实例细则一个成员是否是响应式的给属性重新赋值成对象,是否是响应式的 为血虚vue源码做准备2.数据驱动数据驱动数据响应式数据模型普通的js对象 当我们改变数据 识图会自动更新 避免繁琐的DOM操作 提高开发效率双向绑定 数据 视图 互相都会改变 v-model在表单元素上创建双向数据绑定 数据驱动:vue 最独特的特性之一 开发过程中仅需要关注数原创 2021-04-20 11:22:44 · 111 阅读 · 0 评论 -
3-1-3Vue响应式原理
1.课程目标实现vue模拟一个最小版本的Vue响应式原理在面试的常见问题学习别人优秀的经验,转换成自己的经验给Vue实例细则一个成员是否是响应式的给属性重新赋值成对象,是否是响应式的 为血虚vue源码做准备2.数据驱动数据驱动数据响应式数据模型普通的js对象 当我们改变数据 识图会自动更新 避免繁琐的DOM操作 提高开发效率双向绑定 数据 视图 互相都会改变 v-model在表单元素上创建双向数据绑定 数据驱动:vue 最独特的特性之一 开发过程中仅需要关注数原创 2021-04-20 11:22:09 · 178 阅读 · 0 评论 -
3-1-4虚拟DOM实现原理
1.课程目标了解什么是虚拟DOM,虚拟DOM的作用Snabbdom的基本使用Snabbdom 的源码解析2.什么是虚拟DOM用普通js对象面试DOM对象创建虚拟dom的开销比真实dom小很多{seldatachildremtextelekey}3.为什么使用虚拟DOM1.前端开发开始粗糙 项目复杂,操作也复杂2.出来了MVVM框架 视图和状态同步3.模板引擎可以简化视图操作,没法跟踪状态 变化无法得知上一步的状态删除再创建4.虚拟DOM跟踪状态变化有效的更原创 2021-04-20 11:16:39 · 150 阅读 · 0 评论 -
2-2-5webpack源码
1.内容概述1.webpack打包流程拆分不同的环节2.做了什么工作3.如何完成的4.使用了什么技术5.模块的加载和loader的使用6.webpack的配置演示2.打包后源码分析path: path.resolve(‘dist’) 输出目录的路径对输出文件进行分析1.我们称之为模块定义“./src/index.js”: 路径模块id 视为键值对(function (module, exports) {console.log(‘index.js内容’)module.exp原创 2021-04-13 01:01:16 · 212 阅读 · 0 评论 -
2-2-4规范化标准
1.规范化标准前端工程化为什么要有规范标准 软件开发需要多人协同 不同开着具有不同的编码习惯和喜好 不同的喜好增加项目维护成本 每个项目或者团队需要明确统一的标准哪里需要规范化标准 代码 文档 甚至时提交日志 开发过程中认为编写的成果物 代码标准化规范最为重要实施规范化的方法 编码前 人为的标准约定 通过工具实现Lint ESLint 工具使用 定制ESLint校验规则 ESLint 对TypeScript的支持 ESLint结合自动化工具或者Webpack 基原创 2021-04-13 01:00:21 · 62 阅读 · 0 评论 -
2-2-3Rollup.txt
1.Rollup更小巧ESM打包器没有HMR热模块替换充分利用ESM各项特性的高效打包器2.快速上手RollupRollup 安装指令rollup 路径文件 -iife --dist/bundle.js打包结果简洁,剔除不使用的代码因为自动使用tree-shaking3.配置文件 rollup.config.jsexport default {input: ‘src/index.js’,output: { //对象file: ‘dist/bundle.js’,fo原创 2021-04-13 00:59:37 · 71 阅读 · 0 评论 -
2-2-2Webpack打包
1.打包工具的由来1.ES Modules存在环境兼容问题2.模块文件过多,网络请求频繁3.所有前端资源都需要模块化解决方法: 新特性代码转换兼容所有环境的代码 散落的模块文件打包到一起 支持不同种类资源文件类型新特性代码编译模块化JS打包支持不同类型的资源模块2.模块打包工具 Module bundler 概要Webpack模块加载器 Loader 解决兼容问题代码拆分 根据需要打包代码增量加载渐进式加载资源模块 Asset Module 前端整体的模块化原创 2021-04-13 00:58:53 · 240 阅读 · 0 评论 -
2-2-1模块化开发.txt
1.模块化概述管理组织代码1.模块化演变过程2.模块化规范3.常用的模块化打包工具4.教育模块化工具构建现代Web应用5.打包工具的优化技巧2.模块化的演进过程代码的规模需要,模块化会遇到一些问题1.文件划分的方式 污染全局作用域 命名冲突问题 无法管理模块依赖关系 早期模块化完全依靠约定 2.命名空间方式 减少命名冲突 没有私有空间,能在外部被访问修改 依赖关系没有解决 3.IIFE 函数提供的私有作用域中---私有成员 只有需要暴露给外部的成员才挂到全原创 2021-04-13 00:58:04 · 98 阅读 · 0 评论 -
2-1-1工程化概述
1.工程化的定义和主要解决的问题通过工程化提升 战斗力面临的问题: 1.使用ES6,但兼任有问题 2.使用css编程化工具 运行环境不支持 3.模块化的方式 运行环境不支持 部署上线,手动压缩代码和资源文件 过程,手动上传代码到服务器 (热补嘿嘿) 多人协作,代码风格不统一 1.传统语言或语法的弊端2.无法使用模块化、组件化3.重复的机械式工作4.代码风格统一、质量难保证5.依赖后端服务接口支持6.整体依赖后端项目需要工程化2.工程化表现提高效率 降原创 2021-03-29 22:50:04 · 156 阅读 · 0 评论