- 博客(19)
- 收藏
- 关注
RSS订阅原创 SPA 单页面
上面大家已经对单页面有所了解了，下面来讲讲多页应用 MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载如下图。history 模式核心借用 HTML5 history api，api 提供了丰富的 router 相关属性先了解一个几个相关的 api。用pushsate记录浏览器的历史，驱动界面发送变化。首次渲染速度相对较慢。
2023-08-02 21:07:16
190
原创 slot 插槽
slot 是插槽的意思。并不是 vue 中独有的概念。在 HTML 中 slot 元素 ，作为 Web Components 技术套件的一部分，是 Web 组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个例子template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，在Vue中的概念也是如此。
2023-08-01 21:15:42
161
1
原创 vue 的 mixin 的理解
Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。
2023-07-31 20:52:14
205
原创 Vue 组件之间的通信方式
适用场景：子组件传递数据给父组件子组件通过emit触发自定义事件，emit触发自定义事件，emit触发自定义事件，emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数Father.vue。
2023-07-30 21:17:25
86
1
原创 v-if 和 v-for 的优先级
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化两者在用法上。
2023-07-30 20:59:53
1344
1
原创 生命周期的理解
created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的触发时机上created是比mounted要更早的两者相同点：都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会出现此情况建议：放在create生命周期当中。vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的 DOM。
2023-07-30 20:32:48
87
1
原创 v-show 和 v-if
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含 v-else)，都能控制元素在页面是否可见当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置。
2023-07-27 20:36:53
104
1
原创 Vue 中的$nextTick
官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构</构建一个vue实例修改message这时候想获取页面最新的DOM节点，却发现获取到的是旧值。
2023-07-26 20:27:08
84
1
原创 vue 中的 key
Key 是什么key 的作用主要是为了高效的更新虚拟 DOMkey 是给每一个 vnode 的唯一 id，也是 diff 的一种优化策略，可以根据 key，更准确， 更快的找到对应的 vnode 节点,这个 key 的作用是用来加速这个比较的过程的。开始之前，我们先还原两个实际工作场景那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key 是给每一个 vnode 的唯一 id，也是 diff 的一种优化策略，可以根据 key，更准确， 更快的找到对应的 vnode 节点。
2023-07-25 21:07:24
584
原创 虚拟 DOM
虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM 表现为一个 Object对象。
2023-07-24 21:19:35
176
原创 vue 响应式原理
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
2023-07-24 20:23:50
57
原创 JS 中如何实现函数缓存，函数缓存有哪些应用场景？
函数缓存是：保存函数的运算结果。本质上就是用空间（缓存存储）换时间（计算过程），常用于缓存数据计算结果和缓存对象缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理。
2023-07-23 20:17:30
383
原创 什么是防抖和节流？有什么区别？如何实现？
本质上是优化高频率执行代码的一种手段如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（抖流）和debounce（节防）的方式来减少调用频率#定义节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时一个经典的比喻:想象每天上班大厦底下的
2023-07-23 20:09:42
67
原创 JavaScript 中内存泄漏
内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃在C语言中，因为是手动管理内存，内存泄露是经常出现的事情。
2023-07-20 20:41:44
155
原创 闭包与其使用场景
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域在 JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁。下面给出一个简单的例子displayName() 没有自己的局部变量。然而，由于闭包的特性，它可以访问到外部函数的变量。
2023-07-19 20:31:30
81
原创 深拷贝和浅拷贝
JavaScript中存在两大数据类型：基本类型引用类型基本类型数据保存在在栈内存中；引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。
2023-07-18 20:21:34
85
1
原创 em/px/rem/vh/vw 区别
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。
2023-07-15 00:45:31
198
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人