- 博客(75)
- 收藏
- 关注
RSS订阅原创 原型链总结
js中每个实例对象都有一个原型对象，当实例对象本身没有所需要的属性、方法，会从实例对象的原型上寻找，原型对象上没有找到，则会一层一层通过原型链向上查找，直到找到，或者找到原型链的顶层：null实例对象的__proto__指向原型对象，原型对象的constructor指向实例对象的构造函数，实例对象的构造函数通过prototype指向原型对象，实例对象又是通过构造函数new出来的，所以有这么个三角关系原型对象的__proto__指向Object.prototype,Object.prototype的co
2022-07-05 19:16:14
162
原创 Vue3的效率提升
Vue2与Vue3的区别vue2中用new Vue()创建vue实例；vue3用createApp()实现；vue2中this是组件实例；vue3中this是组件代理对象；vue2中只能有一个根节点；vue3中可以有多个根节点；vue3中所有的data数据，method方法，及其他钩子函数都写在setup中；......
2022-06-20 11:06:11
214
原创 vue2响应式原理
响应式数据的最终目标，是当对象本身或对象的属性发生变化时，会运行一些函数，最常见的就是render函数在具体表现上，具体会用到几个核心部件Observer的目标非常简单，就是把一个普通的对象变为响应式对象为了实现这一点，Observer把对象的每个属性通过 object.defineProperty转换带有getter，setter属性,这样，当访问或设置属性时就有机会做一些别的事Observer是vue内部的构造器，我们可以通过vue提供的静态方法vue.Observer ( object )间接使用该
2022-06-16 11:24:20
167
2
原创 v-model 的原理
v-model既可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性与事件当其作用于表单元素时，vue会根据表单的元素类型去生成合适的属性和事件，例如，作用于普通文本框的时候，它会生成value属性跟input事件，而当其作用于多选框、单选框时，它会生成checked属性和change事件v-model也可作用于自定义组件，当其作用于自定义组件时，默认情况下，它会生成一个value属性和input事件还可以通过model的配置来改变生成的属性和事件...
2022-06-15 22:03:39
681
原创 vue虚拟Dom详解
虚拟dom本质上是一个js对象，用来描述视图的界面结构，在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这意味着每个组件都对应着一颗虚拟dom树在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建的时候，还发生在视图依赖的数据更新的时候，如果在渲染时，直接使用真实dom，由于真实dom的创建，更新，插入会带来大量的性能消耗，从而就会极大地降低渲染效率，因此，vue在渲染时，使用虚拟dom来替代真实dom主要是解决渲染效率的问题每个组件实例首次被
2022-06-15 21:39:17
6704
2
原创 vue组件之间的通信方式
绝大部分vue本身提供的通信方式，都是父子组件通信最常见的组件通信方式之一，由父组件传递给子组件最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件父组件可以给子组件传递class、style，它们会合并到子组件的根元素上父组件传递给子组件的属性，如果子组件没有声明这些属性，则称之为attribute，子组件可以通过 $ attrs获取这些属性，这些属性会附着在子组件的根元素上，子组件可以通过设置inheritAttrs : false，禁止将attribute附着在子组件根元素上，
2022-06-15 16:40:52
70
转载 Provide和Inject的用法
provide的选项：inject的选项：代码执行顺序data->provide->created->mountedprovide 和 inject 绑定并不是可响应的。这是刻意为之的。如何变成响应式的呢，再简单改一下拓展：你可以直接传一个this过去，这样孙子组件会获得爷爷组件的实例对象，这种方式也是响应式的...
2022-06-13 16:12:19
604
原创 2022-6-1（面经）
各种选择器的优先级，看代码说出最后的样式结果？选择器的优先级从大到小依次是：内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器选择器的优先级是根据权重来判断的，其中标签选择器是1，类选择器是10，ID选择器是100，群组选择器 （选择器自身大小) , 包含选择器（选择器权重之和) , ! importent (最高权重)，如果选择器的权重一样，则后面的选择器样式会优先执行，继承选择器的权重为0，与直接作用相比，继承更小怎么开启动画加速，底层原理是什么？...
2022-06-13 16:01:55
79
转载 分析vite
vite:https://github.com/vitejs/vitewebpack和vite都是现代化打包工具为什么Vite启动快底层语言从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。webpack 原理图vite原理图webpack: 分析依赖=> 编译打包=>交给本地服务器进行渲染。首先分析各个模块之间的依赖，然
2022-03-10 13:59:19
742
原创 React组件状态
组件状态组件状态：组件可以自行维护的数据组件状态仅在类组件中有效状态（state），本质上是类组件的一个属性，是一个对象状态初始化状态的变化不能直接改变状态：因为React无法监控到状态发生了变化必须使用this.setState({})改变状态一旦调用了this.setState，会导致当前组件重新渲染组件中的数据props：该数据是由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数组state：该数组是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据
2022-02-23 14:33:50
563
原创 React组件和组件属性
组件和组件属性组件：包含内容、样式和功能的UI单元创建一个组件特别注意：组件的名称首字母必须大写函数组件返回一个React元素类组件必须继承React.Component必须提供render函数，用于渲染组件组件的属性对于函数组件，属性会作为一个对象的属性，传递给函数的参数对于类组件，属性会作为一个对象的属性，传递给构造函数的参数注意：组件的属性，应该使用小驼峰命名法组件无法改变自身的属性。之前学习的React元素，本质上，就是一个组件（内置组件）React中的哲学
2022-02-10 14:42:03
99
原创 JSX语法
JSX什么是JSXFacebook起草的JS扩展语法本质是一个JS对象，会被babel编译，最终会被转换为React.createElement每个JSX表达式，有且仅有一个根节点React.Fragment每个JSX元素必须结束（XML规范）在JSX中嵌入表达式在JSX中使用注释将表达式作为内容的一部分null、undefined、false不会显示普通对象，不可以作为子元素可以放置React元素对象将表达式作为元素属性属性使用小驼峰命名法防止注入攻击自
2022-02-09 10:50:00
79
原创 React、Hello World
Hello World直接在页面上使用React，引用下面的JS<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src
2022-02-07 11:02:26
74
原创 React概述
React概述官网：https://react.docschina.org/什么是React？React是由Facebook研发的、用于解决UI复杂度的开源JavaScript库，目前由React联合社区维护。它不是框架，只是为了解决UI复杂度而诞生的一个库React的特点轻量：React的开发版所有源码（包含注释）仅3000多行原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多
2022-02-07 11:00:45
83
原创 升级后的Vue3跟原来的Vue2有什么区别？
vue2用new Vue()来创建vue实例；vue3用createApp()创建vue实例；vue2中this指向组件实例对象；vue3中this指向组件代理对象；vue2中组件只有一个根节点；vue3中组件可以有多个根节点；vue2中组件的data，method，computed，watch及其他生命周期钩子函数等都分区域模块存放，当组件功能太多，容易产生功能代码结构不清晰；vue3中组件的data，method，computed，watch及其他生命周期钩子函数等都在setup中在导出，可以使.
2021-12-20 14:29:16
230
原创 类数组&数组去重&深度克隆-复习
类数组属性要为索引（数字）属性，必须要有length属性，最好加入push。var obj ={ "2":"a", "3":"b", "length": 2, "push":Array.prototype.push}//类数组push实现原理Array.prototype.push = function (target){ obj[obj.length] = target; obj.length++;}封装typeof()...
2021-04-14 18:54:01
57
转载 JavaScript里的循环方法：forEach，for-in，for-of
JavaScript诞生已经有20多年了，我们一直使用的用来循环一个数组的方法是这样的：for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}自从JavaScript5起，我们开始可以使用内置的forEach方法：myArray.forEach(function (value) { console.log(value);});写法简单了许多，但也有短处：你不能中断循
2021-04-02 20:51:39
103
转载 foreach
1、foreach定义：foreach又叫做增强for循环,相当于for循环的简化版，因此在一些较复杂的循环中不适用。结构：foreach(元素类型 元素名称：循环对象（数组、集合）){循环语句}特点：foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高。2、foreach与for循环的明显差别在于foreach循环时循环对象（数组、集合）被锁定，不能对循环对象中的内容进行增删改操作。3、实例： // for循环：可以修改循环语句 var a
2021-04-02 20:47:46
592
原创 map集合
map集合键值对（key value pair）数据集合的特点：键不可重复map集合专门用于存储多个键值对数据。在map出现之前，我们使用的是对象的方式来存储键值对，键是属性名，值是属性值。使用对象存储有以下问题：键名只能是字符串获取数据的数量不方便键名容易跟原型上的名称冲突如何创建mapnew Map(); //创建一个空的mapnew Map(iterable); //创建一个具有初始内容的map，初始内容来自于可迭代对象每一次迭代的结果，但是，它要求每一次迭代的
2021-04-02 20:33:52
88
原创 set 集合
set 集合一直以来，JS只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。set用于存放不重复的数据如何创建set集合new Set(); //创建一个没有任何内容的set集合new Set(iterable); //创建一个具有初始内容的set集合，内容来自于可迭代对象每一次迭代的结果如何对set集合进行后续操作add(数据): 添加一个数据到set集合末尾，如果数据已存
2021-04-02 20:27:38
158
原创 async 和 await - 复习
async 和 awaitasync 和 await 是 ES2016 新增两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise。async目的是简化在函数的返回值中对Promise的创建async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。async function test(){ console.log(1); r
2021-04-02 20:21:10
66
原创 Promise-复习
PromisePromise的基本使用Promise的串联练习Promise的基本使用const pro = new Promise((resolve, reject)=>{ // 未决阶段的处理 // 通过调用resolve函数将Promise推向已决阶段的resolved状态 // 通过调用reject函数将Promise推向已决阶段的rejected状态 // resolve和reject均可以传递最多一个参数，表示推向状态的数据})pro.then(d
2021-04-02 19:06:42
60
原创 展开运算符-复习
const arry = [2, 4, 6, 8]; const addArry = [...arry]; console.log(addArry); //控制台输出: (4) [2, 4, 6, 8] const obj = { name: "ganMr", age: 18, love: "xuMiss", }; const obj1 = { ...obj, name: "xuMiss" };.
2021-04-02 00:31:45
55
原创 迭代器-复习
什么是迭代？从一个数据集合中按照一定的顺序，不断取出数据的过程迭代和遍历的区别？迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完遍历强调的是要把整个数据依次全部取出迭代器对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象迭代模式一种设计模式，用于统一迭代过程，并规范了迭代器规格：迭代器应该具有得到下一个数据的能力迭代器应该具有判断是否还有后续数据的能力const ary = [1, 3, 5, 7, 9];function Itera..
2021-04-01 22:35:52
198
原创 剩余参数-复习
arguments的缺陷：如果和形参配合使用，容易导致混乱从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图ES6的剩余参数专门用于收集末尾的所有参数，将其放置到一个形参数组中。语法:function (...形参名){}细节：一个函数，仅能出现一个剩余参数一个函数，如果有剩余参数，剩余参数必须是最后一个参数...
2021-04-01 21:50:30
104
原创 ES6箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。基本语法使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。var fn1 = function() {}var fn1 = () => {} // 单个参数var fn2 = function(a) {}var fn2 = a => {} // 多个参数var fn3 = function(a, b) {}var fn3 =
2021-03-16 17:34:40
57
原创 模块化语法(导入导出)
commonJS导出：exports;导入：require;示例：//a.jsexports.foo = function() { console.log('foo')}//b.jsvar a = require('./a.js')a.foo()CommonJS 缺点只能在服务端(Node.js)使用, 不能在浏览器直接使用模块是同步加载的, 如果加载过慢会阻塞进程AMD(Asyncchronous Module Definition)专门为浏览器量身定制,兼容IE
2021-03-16 16:38:12
158
原创 组件_单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。这里有两种常见的试图改变一个 prop 的情形：1…这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用，在后续操作中，会将这个值进行改变。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：props: ['initia
2021-02-14 01:07:56
87
原创 组件_Prop
注册自定义特性组件默认只是写好结构、样式和行为，使用的数据应由外界传递给组件。如何传递？注册需要接收的prop，将数据作为一个自定义特性传递给组件。如:<div id="app"> <video-item title="羊村摇" poster="https://developer.duyiedu.com/bz/video/955bac93ccb7f240d25a79b2ff6a9fdbda9537bc.jpg@320w_200h.webp" pla
2021-02-13 23:21:54
142
原创 组件基础
组件是什么？组件是可复用的Vue实例，且带有一个名字，例如名字为shanshan-cmp，那么我们则可以在一个通过new Vue创建的根实例中，把这个组件作为自定义元素来使用：<div id="app"> <shanshan-cmp></shanshan-cmp></div>const vm = new Vue({ el: '#app'})因为组件是可复用的Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、
2021-02-13 23:15:33
283
原创 Vue生命周期
Vue生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期图示生命周期钩子所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之
2021-02-13 23:03:13
54
原创 webpack loader
loaderwebpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块解析的过程中被调用，以得到最终的源码。全流程：chunk中解析模块的流程：chunk中解析模块的更详细流程：处理loaders流程：loade
2021-01-19 22:01:53
80
原创 入口和出口的最佳实践
入口和出口的最佳实践具体情况具体分析下面是一些经典场景一个页面一个JS源码结构|—— src|—— pageA 页面A的代码目录|—— index.js 页面A的启动模块|—— …|—— pageB 页面B的代码目录|—— index.js 页面B的启动模块|—— …|—— pageC 页面C的代码目录|—— main1.js 页面C的启动模块1 例如：主功能|—— main2.js 页面C的启动模块2 例如：实现访问统计的额外功能|—— …|—— common
2021-01-19 21:54:18
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人