爱发呆的程序员-CSDN博客

原创使用ts hooks封装了一个倒计时方法

我们都知道 setInterval 和 setTimeout 都是异步的方法并且都是宏任务，所以他需要等待同步任务和微任务执行完成后在执行，所以等待时间 >= 设定的等待时间！那么我们需要怎么减少时间的误差呢？可以看下我前面的写的面试题的文章！我这边用的是其中的一种，使用动态计算的方式！有点久没有更新和维护了，最近会抽时间把之前的很多内容补上！暴露出来，当需要停止时，只需要把state.Type 赋值为 true即可！方法计时，这里肯定很多人会有疑问，为什么用。

2023-04-25 14:04:36 806

原创 TS简单介绍以及用法

TS是TypeScript的缩写，是JavaScript的超集（JS有的TS都有），也可以说TS是 type + js，加了一个类型。let a = 0为什么需要给JS添加type呢？因为js的类型系统存在“先天缺陷”，JS代码中绝大部分的错误都是类型错误，那么就会存在一个问题，那就是找bug、改bug的时间增加，严重影响了开发效率。从编程语言的动静来区分；TS属于静态类型的编程语言，JS属于动态的编程语言。动态编程语言：执行期间做类型检查静态编程语言：编译期间做类型检查更早发现代码中的错误，

2022-09-28 21:21:06 7564

原创定时器一次执行两个执行完成后在执行下一个

写了一个有功能相当于一样的的代码但是不是一次执行两个而是后面执行的拿前面执行时间较小的时间然后让执行时间相加，当做这次执行的时间，把相加后的时间代替刚刚拿的较小时间，然后继续前面的操作，代码如下...

2022-07-25 16:25:12 651

原创面试题，后期还会更新

随便写写面试题，不是很全面，还会继续补充<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt

2021-03-30 15:27:57 214

原创 Vue响应式原理

Vue响应式原理1、目标模拟一个最小版本的Vue响应式原理在面试的常问问题实际项目中出现问题的原理层面的解决给Vue实例新增一个成员是否是响应式的？给属性重新赋值成对象，是否是响应式的？为学习Vue源码做铺垫。2、数据驱动在实现整个Vue响应式代码之前，我们先来了解几个概念。第一个：数据驱动第二个：响应式的核心原理第三个：发布订阅模式和观察这模式我们先来看一下数据驱动的内容：数据响应式，双向绑定，数据驱动（我们经常看到这几个词）数据响应式：数据模型仅仅是普

2021-03-10 11:36:56 260

原创 vue-router：VueRouter模拟实现与源码解读

vue-router：VueRouter模拟实现与源码解读1、Vue.use( )源码源码位置：vue/src/core/global-api/use.jsexport function initUse (Vue: GlobalAPI) { //use方法的参数接收的是一个插件，该插件的类型可以是一个函数，也可以是一个对象 Vue.use = function (plugin: Function | Object) { //_installedPlugins数组中存放已经安装的

2021-03-10 10:17:27 226

原创 Vue-router原理:8、initEvent方法实现

Vue-router原理:8、initEvent方法实现现在有一个问题就是，当点击浏览器中的后退与前进按钮的时候，地址栏中的地址发生了变化，但是对应的组件没有发生变化。这时候要解决这个问题，就需要用到popstate事件popstate事件，可以发现浏览器历史操作的变化，记录改变后的地址，单击前进或者是后退按钮的时候触发该事件initEvent() { window.addEventListener("popstate", () => { this.data.cu

2021-03-06 11:51:44 264

原创 Vue-router原理:7、创建router-view组件

Vue-router原理:7、创建router-view组件router-view组件就是一个占位符。当根据路由规则找到组件后，会渲染到router-view的位置。在initComponents方法中创建router-view组件 //该方法需要一个参数为Vue的构造函数。 //当然也可以使用全局的_Vue. initComponents(Vue) { Vue.component("router-link", { props: { to: String,

2021-03-06 11:50:46 813

原创 Vue-router原理:6、render函数

Vue-router原理:6、render函数虽然使用完整版Vue可以解决上面的问题，但是由于带有编译器，体积比运行时版本大10k左右，所以性能比运行时版要低。那么这一小节我们使用运行时版本来解决这个问题。我们知道，完整版中的编译器的作用就是将template模板转成render函数，所以在运行时版本中我们可以自己编写render函数。但是在这你肯定也有一个问题，就是在单文件组件中，我们一直都是在写<template></template>,并且没有写render函数，但是

2021-03-06 11:48:59 1067

原创 Vue-router原理:5、initComponents方法实现

Vue-router原理:5、initComponents方法实现initComponents方法，主要作用是用来创建router-link和router-view这两个组件的。下面先在这个方法中创建router-link这个组件。先来看一下router-link这个组件的基本使用<router-link to="/users"> 用户管理</router-link>我们知道，router-link这个组件最终会被渲染成a标签，同时to作为一个属性，其值会作为a标签中的h

2021-03-06 11:47:11 471

原创 Vue-router原理:4、createRouteMap方法实现

Vue-router原理:4、createRouteMap方法实现createRouteMap方法，该方法会把构造函数中传入进来的options参数中的路由规则，转换成键值对的形式存储到routeMap中。键就是路由的地址，值就是对应的组件 createRouteMap() { this.options.routes.forEach((route) => { this.routeMap[route.path] = route.component; });

2021-03-06 11:42:50 3145

原创 Vue-router原理:3、实现构造函数

Vue-router原理:3、实现构造函数在介绍VueRouter的类图时，我们说过Constructor是一个构造方法，该该构造方法中会初始化options ,data,routeMap这几个属性。 constructor(options) { this.options = options; this.routeMap = {}; this.data = _Vue.observable({ current: "/", }); }

2021-03-06 11:41:55 525

原创 Vue-router原理:2、install方法实现

Vue-router原理:2、install方法实现在vue_router_app项目的src目录下面创建一个vuerouter目录，同时创建一个index.js文件，在该文件中创建如下的代码。install方法需要的参数是Vue的构造方法。let _Vue = null;export default class VueRouter { //调用install方法的时候，会传递Vue的构造函数 static install(Vue) { //首先判断插件是否已经被安装，如果已经被安装

2021-03-06 11:41:07 510

原创 Vue-router原理:1、分析Vue Router

Vue-router原理现在我们已经掌握了Vue Router的基本使用，下面我们来模拟Vue Router的实现，通过模拟实现，来了解其内部的实现原理。我们这里模拟的是History模式。Hash模式基本实现上是一样的。这里先来复习一下Hash模式的工作原理。·URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发hashchange事件。监听hashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件。根据当前路由地址找到对应组件重新渲染

2021-03-06 10:31:42 297 1

原创 Vue-router：13、Hash模式与History模式

Vue-router：13、Hash模式与History模式13.1 Hash模式与History模式区别前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。如果需要向服务器发送请求，需要用到ajax方式。两种模式的区别首先是表现形式的区别Hash模式https://www.baidu.com/#/showlist?id=22256hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。当然这种模式相对来说

2021-03-04 11:16:32 2930 3

原创 Vue-router:12、路由组件缓存

Vue-router:12、路由组件缓存利用keepalive做组件缓存，保留组件状态，提高执行效率。<keep-alive include="home"> <router-view></router-view></keep-alive>使用include或者exclude时要给组件设置name（这个是组件的名称，组件的名称通过给组件添加name属性来进行设置）当我们进行路由切换的时候，对应的组件会被重新创建，同时数据也会不断的重新加载。

2021-03-04 10:38:32 533 1

原创 Vue-router:11、addRoutes动态路由添加

Vue-router:11、addRoutes动态路由添加在前面的案例中，我们都是将路由定义好，然后通过路由守卫来判断，某个用户是否登录，从而决定能否访问某个路由规则对应的组件内容。但是，如果某些路由规则只能用户登录以后才能够访问，那么我们也可以不用提前定义好，而是在登录后，通过addRoutes方法为其动态的添加。首先这里需要，还需要全局的路由守卫来进行校验判断，只不过这里全局路由守卫的逻辑发生了变化。router.beforeEach((to, from, next) => {

2021-03-04 10:34:27 858 1

原创 Vue-router:10、路由守卫

Vue-router:10、路由守卫Vue-router中的路由守卫，主要是对其内容进行保护，如果没有对应的权限，则不允许访问。我们首先来看一下全局守卫，也就是所有的路由都会经过全局守卫来进行检测。 //实现全局守卫 router.beforeEach((to, from, next) => { //to:去哪个页面，from来自哪个页面，next继续执行. //判断哪个路由需要进行守卫，这里可以通过元数据方式 if (to.meta

2021-03-03 17:32:24 180 1

原创 Vue-router:9、路由案例

Vue-router:9、路由案例9.1 抽离并且渲染App根组件。将素材中的代码修改成如下的形式：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <script src="./lib/vue.js"></script> <

2021-03-03 17:10:09 216 1

原创 Vue-router:8、编程式导航

Vue-router:8、编程式导航页面导航的两种方式声明式导航：通过点击链接实现导航的方式，叫做声明式导航例如：普通网页中的 <a></a> 链接或 vue 中的 <router-link></router-link>编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航例如：普通网页中的 location.href编程式导航基本用法常用的编程式导航 API 如下：this.$router.push(‘hash地

2021-03-03 16:03:47 160 1

原创 Vue-router: 7、命名路由

Vue-router: 7、命名路由为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。 const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'user', component: User } ] })<!--单击链接，可以跳转到名称为`user`的这个路由规则，并且通过params

2021-03-03 14:45:03 210 1

原创 Vue-router:6、动态路由匹配

Vue-router:6、动态路由匹配6.1 动态匹配路由的基本用法思考：<!– 有如下 3 个路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> // 定义如下三个对

2021-03-03 14:15:16 204

原创 Vue-router5、嵌套路由

Vue-router5、嵌套路由嵌套路由功能分析点击父级路由链接显示模板内容模板内容中又有子级路由链接点击子级路由链接显示子级模板内容下面看一下实现的步骤父路由组件模板父级路由链接父组件路由填充位<p> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> &l

2021-03-03 11:31:50 156

原创 Vue-router：4、路由重定向

Vue-router：4、路由重定向路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user

2021-03-03 11:14:52 2301

原创 vue-router：3、vue-router的基本使用

vue-router：3、vue-router的基本使用Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。基本使用的步骤：引入相关的库文件添加路由链接添加路由填充位定义路由组件配置路由规则并创建路由实例把路由挂载到Vue 根实例中下面看一下具体的实施过程引入相关的库文件<!-- 导入 vue 文件，为全局 window 对象挂

2021-03-03 11:12:15 272

原创 Vue-router：2、实现简易前端路由

Vue-router：2、实现简易前端路由基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）案例代码实现如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /

2021-03-03 11:07:09 101

原创 Vue-router：1、路由简介

Vue-router：1、路由简介路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为：后端路由前端路由后端路由概念：根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系SPA（Single Page Application）Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）SPA（Single Page Application）单页面应用程序：整个网站只有一个页

2021-03-03 11:04:56 191

原创复习Vue20、函数式组件和混入(mixin)

复习Vue20、函数式组件和混入(mixin)20.1、函数式组件组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法时，可以将组件标记为functional.这意味它无状态（没有响应式数据），也没有实例（没有this上下文）因为只是函数，所以渲染的开销相对来说，较小。函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。20.2 混入（mix

2021-03-02 17:42:49 279

空空如也

空空如也