- 博客(11)
- 收藏
- 关注
RSS订阅原创 vue组件间通信方式
1.父传子Props Downparent.vue<template> <div> <h1>Props Down Parent</h1> <child title="来自父组件的消息"></child> </div></template><script>import child from './Child'export default { component
2021-04-04 11:18:54
80
原创 虚拟DOM的理解
什么是虚拟DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。为什么要使用虚拟DOM使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如何操作 DOM，从而提高开发效率。关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚
2021-01-30 13:04:13
157
原创 defineProperty与Proxy模拟vue的响应式
defineProperty监听对象的属性 <script> // 模拟 Vue 中的 data 选项 let data = { msg: 'hello' } // 模拟 Vue 的实例 let vm = {} // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举（可遍历） enumerable:
2021-01-10 20:21:41
106
原创 webpack HMR的理解
webpack-dev-server使用webpack-dev-server可以实现改变代码后，浏览器页面自动刷新。但是如果遇到编辑内容，在页面输入内容后，又去代码端改变其样式，这时保存代码后页面刷新，这时候之前编辑的内容就消失了。面对此种问题,可以利用webpack热更新来解决。webpack HMR热更新应用运行过程中实时替换某个模块，应用运行状态不受影响热替换只将修改的模块实时替换至应用中HMR注意事项处理hmr的代码报错会导致自动刷新，(用hotOnly解决)没启用hmr的
2020-11-29 23:33:33
199
1
原创 node开发脚手架入门
脚手架工作过程 1.通过命令行交互询问用户问题 2.根据用户回答的结果生成文件node 命令行js文件中加入 #!/usr/bin/env node用来指定用node执行脚本文件举个例子1.新建文件夹，切换到当前文件夹下2.npm init 初始化一个package.json3.在package.json中添加 “bin”: “mycli.js”,{ "name": "joy-cli", "version": "1.0.0", "description": "this
2020-10-24 22:27:39
150
原创 js代码性能优化分析
减少判断层级function doSomething (part, chapter){ const parts = ['ES2016', '工程化', 'vue', 'react', 'Node'] if(!part){ console.log('请确认模块信息'); return; } if(!parts.includes(part)){ return; } console.log('属于当前课程');
2020-10-14 04:41:19
152
1
原创 闭包陷阱问题
避开闭包陷阱function foo() { var el = document.getElementById('btn'); el.onclick = function () { console.log(el.id) } el = null; // 清除，避免闭包泄露内存}foo()btn的dom在浏览器中引用消失，但代码引用el没消失，浏览器不能将其清除，导致内存一直占用。使用闭包时要注意不使用时将其释放，让浏览器回收...
2020-10-14 04:21:31
174
原创 可迭代接口 Iterable
Iterable分析const obj = { [Symbol.iterator]: function(){ return{ next: function(){ return{ value: 'jack', done: true } } } }}1.最外层对象实现
2020-10-14 04:08:30
137
原创 proxy 的理解
proxy 的理解const p = new Proxy(target, handler)参数一，代理的目标对象，参数2，代理的处理对象const person = { name: 'joy', age: 20}const personProxy = new Proxy(person, { //监视属性读取 //target目标对象，property外部访问对象的属性名 get(target, property){ //判断是否存在要访问的
2020-10-11 22:29:16
236
原创 js异步编程的理解
js异步编程同步任务与异步任务同步任务任务依次执行，当一个任务耗时很长时，后面的任务都要排队，造成阻塞异步任务不会去等待这个任务的结束才开始下一个任务开启过后就立即往后执行下一个任务后续逻辑一般会通过回调函数的方式定义帮助单线程的js语言同时处理大量的耗时任务缺点：代码执行顺序混乱异步的根基是回调函数回调函数由调用者定义，交给执行者执行的函数EventLoop就是在程序中设置两个线程，一个负责程序本身的运行，称为"主线程"，另一个负责 主线程与其他进程的通信（主要是各种I
2020-10-06 18:13:04
301
原创 函数式编程的理解
这里写自定义目录标题高阶函数纯函数函数式编程不会保留计算中间的结果，变量是不可变的（无状态的）我们可以把一个函数的执行结果交给另一个函数处理高阶函数可以把函数作为参数传递给另一个函数可以把函数作为另一个函数的返回结果 //函数作为参数 function forEach(array, fn){ for(let i = 0; i < array.length; i++){ fn(array[i]) } } //测试 let arr = [1, 2, 3,
2020-10-06 17:58:55
101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人