vue3自动导入Api、组件
自动导入Api setup语法可以不用再一个一个的把变量和方法都return出去就能在模板上使用,对于一些常用的VueAPI,比如ref、computed、watch等,还是每次都需要我们在页面上手动进行import。 可以通过unplugin-auto-import实现自动导入,不用在每个vue文件里边导入安装通过npm install unplugin-auto-import -D安装配置修改vite.config.js 12345678910111213import AutoImport from 'unplugin-auto-import/vite';export default{ plugins: [ AutoImport({ imports: [ 'vue', 'vue-router' ], include: [/\.[tj]sx?$/, /\.vu ...
vue2响应式原理
首先想想我们是怎么样写vue,没错如下 123456789new Vue({ el: '#app', data: { text:'Hello Joker' }, render(h){ return h('div', this.text) }}) 那肯定会有一个vue的类,他的构造函数拥有一个参数options,最基本拥有三个参数,data、el、render,在这里重点看data,因为要看他的响应式怎么实现的 12345class myVue{ constructor(options) { this._data = options.data; }} 有了这个类、也收到了一个参数options,他也拥有一个data属性,现在就要把他转成响应式的,尤总也说过vue2实现是通过Object.defineProperty,那就拥有了下边的函数 12345 ...
call、apply、bind的区别
总结 函数名 返回值 参数 使用方法 是否自动调用 call undefined arg1,arg2,arg3,… function.call(context,arg1,arg2,arg3,…); 是 apply undefined 数组 function.apply(context,[arg1,arg2,arg3,…]); 是 bind 改变了this指向的函数 arg1,arg2,arg3,… function.bind(thisAry, arg1, arg2, …) 否 call, apply, 和 bind 是 JavaScript 中常用的函数。它们的作用是在函数调用时动态地改变函数的上下文。具体来说,它们可以指定函数中的 this 指向哪个对象,以及传递参数给函数。 call调用方法 1function.call(context,arg1,arg2,arg3,...); 1234567const joker = { name:'Joker', sayHello(city){ cons ...
TS的基础概念
TS是什么TypeScript是JavaScript的超集从技术上讲TypeScript就是具有静态类型的 JavaScript。 安装TS打开命令行全局安装 1npm install -g typescript 再执行tsc -v出现版本号则说明安装成功 Hello TypeScript创建一个ts文件,编写如下文件 12345function sayHello(name:string){ return `Hello ${name}`}let user:string = 'TypeScript'sayHello(user); 接着执行tsc,他会生成一个编译好的js文件 12345function sayHello(name) { return "Hello ".concat(name);}var user = 'TypeScript';sayHello(user); 可以看到 使用:来指定一个变量的类型,我们上边给函数sayHello的参数name定义 ...
git学习之路
写在前边现在绝大多数开发团队都是用git作为版本管理工具,之前都是add commit pull push。。。。其他命令一概不知,所以特地学学写下如下笔记,方便以后忘记查询。 Git配置查看所有已经做出的配置1git config -l 更改一些全局配置,例如常用的用户名,邮箱等等。。123git config --global user.name "joker"git config --global user.email "xxxxx@xx.xxx"git config --global color.ui true //修改颜色 不带global则是修改当前所在仓库的配置基础操作本地创建一个Git版本库git init创建一个存放版本库的目录,然后进去该目录并执行git init; 1mkdir git-study-dir && cd git-study-dir && git init 点进目录 如果发现存在.git则说明仓库初始化成功 将文件放入版本库要将文件放入版本库,首先就需要将文件放入暂存区,然后再提 ...
node接入chatGPT
准备工作 node环境 (>=16) chatGPT账号 vpn 访问ChatGPT官网 实现功能 随便发送一个消息 打开控制台,切换到Network,根据标注找到token 执行如下命令1234mkdir node-chat && cd node-chatnpm initnpm install chatgpt express body-parser isomorphic-fetchtype nul>index.ts 打开编辑器 编辑index.js文件12345678910111213141516171819202122232425262728293031323334353637383940import { ChatGPTUnofficialProxyAPI } from "chatgpt";import express from 'express';import bodyParser from 'body-parser'import fetch from &quo ...
js中的各种遍历
1let arr = ['Joker','Pink','north','Red'] for 循环普通的for循环,也是最常用到的 123for(let i = 0;i<arr.length;i++){ console.log(arr[i]);} for infor in 循环 用于遍历对象的属性如果用其来遍历数组 key值则为下标 12345678let obj = { age: 18, name: "Joker", sayHello() { console.log("Hello") }};for (let key in obj) { console.log(`key:${key},value:${obj[key]}`);} for offor of 语句循环遍历可迭代对象的值。such as:数组, ...
js中使用防抖和节流
为什么使用防抖节流打开控制台复制以下代码 然后回车 然后滚动页面,可见随便滚动一下,就会有好多条输出,也就是说这个函数的执行频率很高,随便动一下就会执行很多次,但是我们并不需要如此高的执行频率,浏览器的性能也是有限的。 1234window.onscroll = function(){ var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop);} 防抖(debounce)1234567891011let setDebounce = (fun, time = 3000) => { let timer = null; return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { ...
前端面试题
谈谈vue的生命周期12345678beforeCreate();created();//可以获取数据但是没有dombeforeMounted();mounted();//拥有数据 拥有 dom 常在此处发送请求beforeUpdate();updated();beforeDestroy();destroyed(); 如果使用keep-alive的话会有两个 12activated()unactivated() 说完可以说一下keep-alive使用场景:一个列表点击每个元素都会请求不同的数据,为了有效的减少请求次数,可以讲请求放到activated里边,已经请求过的就不会再次请求,放在mounted时 每次点击切换都会重复请求 可能会深究keep-alive: 作用 是vue的内置组件,是为了缓存组件的状态,当需要组件切换时候,不用重新渲染 props: include:正则或字符串,匹配到名称的组件才会缓存 exclude:正则或字符串,被匹配到的就不会缓存 max:最多可以缓存多少组件实例 v-if 和v-show 的区别? 都是控制元素展示和隐藏的 v-if使通过渲 ...
语雀知识库一键导出md文件
获取个人开发者的Token传送门->https://www.yuque.com/settings/tokens 点击新建 选择授权范围 填写用途 复制这里的token 然后打开控制台输入以下代码: 123npm i -g yuque-exporter --registry=https://registry.npmmirror.comSET YUQUE_TOKEN=刚刚复制的token yuque-exporteryuque-exporter 语雀账号//yuque-exporter joker-3bqs9 执行如上代码时候,如发生超时 多执行几次就ok 根据提示就可以找到导出的文件 可能发发现图片路不对 参考传送门:https://blog.csdn.net/qq_42445757/article/details/124843848