前端

v2和v3版本区别

vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object. defineProperty()对数据进行劫持 结合 发布订阅模式的方式来实现的。 // 数据劫持:当访问或者设置 vm 中的成员的时候,做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举(可遍历)

通过一个例子讲解Vue组合式API

一、Composition API概述 当我们编写Vue组件时候,组件中可能包含一系列的功能,例如一个代码仓库管理的应用,用户的仓库列表可以看做是一个组件,这个组件还包含筛选、搜索的功能。 所谓的功能我们可以理解为MVC中的Model和Controller。从视图角度,组件是最基本的代码复用单元,但是从逻辑上,功能模块是最基本的代码复用单元。 每个组件中可能包含多个功能(也称为关注点),而多个功能

离开舒适区之后:从三年前端到 CS 硕士——我在韩国亚大读研的得失

过去一年多,我做了一个挺重要的决定:辞职,去韩国留学读研。这段时间我几乎没怎么学习新的前端内容,但也没有停下来。我在韩国亚洲大学完成了计算机科学与技术(大数据)硕士的学习,在高强度的节奏里重新建立了自己的方法,也因为持续写博客获得了一些机会,担任本科 Web 实训课讲师。现

Astro Islands

Astro Islands代表了前端Web架构的领先范式转变。Astro 将您的 UI 提取到页面上较小的独立组件中。未使用的JavaScript被轻量级HTML取代,保证更快的加载和交互时间(TTI)。 术语“Astro Island”是指HTML的静态页面上的交互式UI组件。一个页面上可以存在多个孤岛,并且一个孤岛始终单独呈现。将它们视为静态、非交互式 HTML 海洋中的岛屿。 im

彻底搞懂盒子模型

一、简述 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:Margin外边距,Border边框,Padding内边距,和Content实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 盒

Canvas vs WebGL:你真的搞懂浏览器图形渲染了吗?

前言:大多数前端工程师提到图形渲染就脑子一懵。Canvas?WebGL?好像懂,又好像不懂。这篇文章我们不装逼,从渲染原理、源码实现、性能差异、实战场景四个维度把它们拆得体无完肤,看完你就明白为什么大多数人都用错了。 Canvas为什么叫"画布"而不是"页面"? 问

react hooks深拷贝后无法保留视图状态

在使用useState做数据操作更新的时候,有一些复杂数据类型,一个对象数组里包含,函数,dom等等复杂数据类型,想要进行数据更新,并且视图更新的情况下,因useState的特性就必须进行深拷贝赋值。 方式 1、JSON.stringify配合JSON.parse 这个有限制,我们的数据类型包含,函数。它会丢失 2、Lodash 里的深拷贝方法 3、递归实现 我这里通过递归直接写的方法,发现拷贝

从Web1.0到Web3.0:互联网的三次进化,你真正理解了吗?

从Web1.0到Web3.0:互联网的三次进化,你真正理解了吗? 过去的我们在网上“看”,现在的我们在网上“说”,未来的我们将“拥有”网络世界的一部分。——Web三代的变迁,正悄然改变我们的一切。 一、前言:为什么要了解 Web 的三次迭代?很多人每天上网刷微博、用微信、刷抖音&#xf

浏览器引入Ant Design of Vue

一、先将vue.min.js,antd.min.js、moment.js、antd.min.css等文件下载到本地; 二、在vue代码里面引入antd组件; 三、在具体的html页面应用; 代码如下: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title&gt

解决element的Table表格组件的高度自适应问题

解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 200px) 的效果 方式一: 注:也可直接将el-table的height属性绑定为字符串:calc(100vh - 200px) 实现为同样的效果, 200 是顶部和底部导航以及部分自定义布局 ;例:(这里使用了rem,一样的道理) 方式二:通过