- 博客(22)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 手写 vue-router
前端路由就是匹配不同的 URL 路径，进行解析，然后动态地渲染出区域 HTML 内容。但是这样存在URL 每次变化都会造成页面的刷新。在 2014 年之前，大家是通过 hash 来实现前端路由，URL hash 中的 # 就是类似于下面代码中的这种 # ：之后，在进行页面跳转的操作时，hash 值的变化并不会导致浏览器页面的刷新，只是会触发 hashchange 事件。在下面的代码中，通过对 hashchange 事件的监听，我们就可以在 fn 函数内部进行动态地页面切换。
2022-09-20 09:18:28
280
原创 vue3 虚拟DOM的diff算法
我们再看一下这个题，贪心的思路就是在寻找最长递增的序列，所以，[1,3]要比[1,5]好，也就是说，在这个上升的序列中，我们要让上升速度尽可能变得慢，这样才有可能让后面的元素尽可能也递增。上面代码的思路，我们用下图演示。上一讲我们详细介绍了在虚拟 diff 计算中，如果新老子元素都是数组的时候，需要先做首尾的预判，如果新的子元素和老的子元素在预判完毕后，未处理的元素依然是数组，那么就需要对两个数组计算 diff，最终找到最短的操作路径，能够让老的子元素通过尽可能少的操作，更新成为新的子元素。
2022-09-20 09:03:41
669
原创 Vue 自定义指令
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。批量注册指令，新建 directives/index.js 文件。然后在入口文件中进行 Vue.use() 调用。import copy from './copy'import longpress from './longpress'// 自定义指令const directives = { copy, longpress
2022-03-25 15:43:58
343
原创 Vue3设计方案-使用服务方式来调用vue组件
在用 elementUI、antdUI 等 ui 框架的时候，都会用到 Message 全局的提示方法，而平时常用的 Vue 组件都是写成 tag 来使用，而 Message 等组件的使用方式则不同，不用引入 Message 的 vue 组件，用 js 就能接下来将上面组件改写成用 js 调用的方式：在改写之前，还需要了解 vue3 的几个全局 API:defineComponent: 将函数或者对象转换成对象返回 h: 将组件对象转换成 vnode render：将 vnode 挂载到..
2022-03-21 15:30:30
678
原创 Vue高阶函数-vue-property-decorator
1、vue-property-decorator这个组件完全依赖于vue-class-component.它具备以下几个属性:@Component (完全继承于vue-class-component) @Emit @Inject @Provice @Prop @Watch @Model Mixins (在vue-class-component中定义);使用当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就
2022-03-16 17:33:14
850
原创 常用算法第一章
1、栈class Stack { constructor() { this.list = [] } // 进栈 push(e) { this.list.push(e) } // 出栈 pop() { return this.list.pop() } // 获取栈顶元素 getTopElement() { return this.list[this.lis
2022-03-15 22:03:32
58
原创 ES6 数组
1、Array.from 方法创建数组(es6 新增)在 js 中将非数组对象转换为真正的数组是非常麻烦的。在 ES6 中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组。function arga(...args) { //...args剩余参数数组,由传递给函数的实际参数提供 let arg = Array.from(args); console.log(arg);}arga( arr1 , 26, from ); // [
2022-03-15 14:58:33
524
原创 JS 常用数组函数
1、Array.isArray()检测是否是数组2、toString()转换为字符串，在默认情况下都会以逗号分隔字符串的形式返回字符串3、正序排序var arr = [1, 2, 3, 11, 12, 456];console.log(arr.sort((a, b) => { return a - b}));//返回[ 1, 2, 3, 11, 12, 456 ]4、倒叙排序var arr = [1, 2, 3, 11, 12, 456];console.
2022-03-15 14:45:46
2794
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人