JDDDDDDyaya-CSDN博客

原创 Vue3 使用自定义 hooks获取dom元素的问题

在自定义hooks的onMounted事件里面获取ref元素，组件调用hooks的时候必须要传递响应式对象。分享下楼主自己的观点，代码如下<script>// demo.vueimport { defineComponent, ref } from 'vue'import useBars from './useBars'export default defineComponent({ props: { Bars: Array, },

2021-09-12 15:29:11 1508 2

原创 Vue tsx 使用自定义v-model修饰符

import { defineComponent, ref, PropType } from 'vue'/** * tsx v-model * v-model 默认绑定的变量名为 modelValue, 你也可以自己命名 * v-model = v-model:modelValue * */const MyInput = defineComponent({ props: { // https://www.vue3js.cn/docs/zh/guide/component-c

2021-07-01 18:20:41 4532

原创 Vue 动态引入图片的两种方式

/**Vue 动态引入图片的两种方式把图片放在public下面，放在 public下面的图片不会被webpack处理，而是直接拷贝，在代码通过 /image/${variable}.png 引入的图片，处理之后就会把variable换成对应的字符串，比如这里就换成了 image/apple.png, public下面存在这个图片，所以能够正常引入(Vue 项目的根路径就是 public，所以能够通过 / 引入图片)通过 require(‘…/…/images/apple.png’)的方

2021-05-26 14:00:02 2130

原创 Vue3 修改 ref的值，不触发watchEffect的原因

const myRef = ref(name: ‘jinD’)修改 myRef.value.xxx时，不触发watchEffect的原因在于，触发trigger传入的对象是否相同，在 watchEffect 里面访问 myRef.value 时，此时 track的target 是refCompImpl实例，也就是ref但是修改值时，是通过 myRef.value.xxx = newValue, 不是给 myRef.value = {}设置新值，触发的trigger是在 proxy 的 getter里面(

2021-04-25 11:23:20 4552 1

原创 vue3 watchEffect onInvalidate 解析

/** * 第一遍调用 getter，cleanUp 没有值，不会执行，然后调用watchEffect(source) 的source，source里面为cleanUp 赋值，然后输出 watchEffect * * 第二遍调用 getter，cleanUp 有值，cleanUp 的值就是onInvalidate传入的回调，先执行cleanUp, 并且cleanUp 通过闭包，保存了 watchEffect 上一次的作用域信息，可以用来清除上一次的一些信息(当watchE

2021-04-22 10:08:49 2035

原创 e.target 与 e.currentTarget

e.currentTarget === thise.target === 你点击的元素，你点击的是谁，e.target 就是谁<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2020-11-07 22:32:04 190

原创 js e.offsetX 和 e.offsetY

本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetYe.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target，大家看下面例子,给出几张截图。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name

2020-11-07 22:27:56 2180 1

原创记录一次webpack 打包优化

记录自己的一次webpack打包优化。项目使用的是vue.cli2.0这是线上的代码，看了看首页所需要加载的资源所耗时400多ms，发现了几个问题1.打包出来的vendors.js ，把第三方库全代码全部打包进去了，导致vendor.js 过大。2.首页加载，没有使用路由懒加载，把其他路由的文件也加载出来了，完全没必要。针对这几个问题，来采取相应的措施。1.使用路由懒加载，加载首页时，只加载需要的组件。路由文件中，对首页需要加载的组件做懒加载。利用 **import(）**语法。 {

2020-10-30 13:52:26 477

原创利用快慢指针求链表中间元素(数组也可以)

// 链表的中间节点 --> 利用快慢指针，快指针每次走两步，慢指针每次走一步，快指针走到尾，慢指针刚好走到一半// Ps: list 就是一个链表，链表我就不写了~function fn(list) { let fast = list let low = list while (fast && fast.next) { // debugger fast = fast.next.next // 快指针每次走2步 low = low.ne

2020-06-25 20:58:55 192

原创 vue 父组件异步请求数据，子组件生命周期先于父组件生命周期执行

当父组件生命周期里面有异步请求的时候，如果父组件不带v-if渲染子组件的话， vue 子组件的生命周期可能在父组件之前执行，导致一系列的问题

2020-06-19 18:08:14 687

原创 js -- 栈

栈遵循 LIFO原则(后进先出)下面给出本人用js模拟的栈，有两种方式，如果有错误，欢迎大家指出~1.基于数组模拟的栈2.基于对象模拟的栈 // 基于数组模拟的栈 class Stack { constructor() { this.items = [] } push() { let args = Array.from(arguments)

2020-06-16 11:17:27 165

原创第一个只出现一次的字符

PS: 大家有更好的方法话，欢迎大家交流。var firstUniqChar = function(str) { if (!str.length) return ' ' let isFind = false for (let i = 0; i < str.length; i++) { let j = 0 for (j; j < str.length; j++) { i

2020-06-07 10:09:06 149

原创 vue $attrs 实现某些功能的动态扩展

@大家可以先看看vue $attrs的介绍vue $attrs先说说我在项目中遇到的问题吧，我这里是有个右键菜单，右键菜单是可以动态扩展的，比如以后需要一个更新的功能，就需要添加一个更新的功能，额外的功能都是根据项目需求来的，不可能一次性就把所有的右键功能全部写出来首先说下这个组件自己逻辑的实现，右键菜单通过v-for循环出来，通过v-for循环出来第一个需要注意的地方就是，每个右键菜单的功...

2020-03-26 15:16:19 561

原创深入了解js instanceof

关于 instanceof 的用法，我的一篇文章讲解到了，欢迎大家去看看instanceof下面贴出我手下的instanceoffunction _instanceof(ex, Fn) { while (ex.__proto__) { if (ex.__proto__ === Fn.prototype) { return true; }; ex = ex.__proto__...

2019-12-09 11:10:11 155

原创 js instanceof

instanceof会判断2点1. 这个实例是不是该构造函数的实例。2. 这个实例的原型链上是否存在这个构造函数的原型例子1：实例是构造函数的实例 function Son() {}; let son = new Son(); console.log(son instanceof Son); // true son 是 Son构造函数的实例例子2：实例的原型链上是否存在这个构...

2019-12-09 10:50:44 188

原创 react生命周期 componentWillReceiveProps

componentWillReceiveProps 在react17中将会被废除的，大家可以去看它在react 17 中的使用方法static getDerivedStateFromProps()componentWillReceiveProps :1. 首先，必须要从父组件接受参数2. 必须要父组件的 re-render被执行注意: 只要父组件的re-render被执行了，子组件的这个...

2019-12-09 10:31:36 228

原创 vue v-model 的原理。

双向数据绑定的原理就是, 让这个表格的value值等于这个变量，然后给表格绑定 oninput事件，表格内容发生变化，直接让这个变量值等于表格新的值。<div id="app"> <input type="text" v-model="count">  ...

2019-12-09 10:07:21 159

原创 vue methods，与 computed的区别。

methods 与 computed最大的区别就是，methods的方法只要被用到了，在re-render的过程中，都会被重新执行，但是computed在re-render的过程中，只有它依赖的值发生了变化，才会被重新执行。避免了重复执行。例子:<div id="app"> <!-- 一定是...

2019-12-09 10:02:27 176

原创 js 手写 bind() 函数

网上有很多讲bind() 函数，自己也在 <你不知道的js> 上卷里面看到了这个方法，根据书上讲的，加上自己理解的，写出一个 bind() 函数供大家参考下ps: 如有不对的地方，欢迎大家指正！首先，bind() 函数是一个函数函数调用bind（这里简称fn）之后，返回给你一个新的函数，在bind() 里面不是直接执行你传入的这个 fn，而是在bind() 返回给你的函数里面执...

2019-09-28 14:50:46 603

原创 js 宏任务，微任务，异步，promise

宏任务:整体 script, setTimeout, setInterval,UI交互事件，setImmediate(Node.js)微任务:Promise, process.nextTick(Node 版 setTimeout，在event loop 的下一次循环中调用回调函数)ps: 我个人觉得用宏任务和微任务来理解promise，和异步更好。首先js的执行顺序是:进入整体代码(宏...

2019-09-20 13:37:15 583

原创 js 单线程

js的单线程原因:.js 是运行在宿主环境中的，多半是浏览器。浏览器是多线程的，但是浏览器只开辟了一条线程来处理js，也就是通常说的js引擎，只开启一条线程的原因就是，js是能够改变DOM结构的，如果开启了多条线程，一个线程上让一个div变宽，但是另一个线程上面要让这个div变高，肯定不能同时变宽变高。单线程又导致了另外一个问题，那就是当遇到 setTImeout等需要等待的任务应该怎...

2019-09-20 13:24:11 223

原创 es6 箭头函数

写下这篇文章，为了让自己好好记住箭头函数的this指向，也和大家分享下我对箭头函数的理解。如果有不对的地方，还望大家指出，谢谢大家了。箭头函数this:1. 在定义的时候就确定了。2. 一旦确定了，就无法更改了两个例子:{ let obj = { count: 1 }; function test() { // a 是定义在 test 里面的,...

2019-09-09 13:24:57 175

原创 [[Prototype]] 对象的属性查找规则

查找一个对象的属性， 1.首先看他自己有没有， 2.没有就去它的__proto__ 指向的prototype里面去找，会一直遍历完prototype 的顶端(Object.prototype) 修改一个对象的prototype 上面的属性 1. prototype 上面的属性设置为 writable: false ，对象无法修改这...

2019-09-06 09:36:05 194

原创 js原型链题目

ps: 这些题目都是在网上找的，附上自己的解释，若有不对的地方，还望大家指正。谢谢大家了。// 所有prototype 链的顶端都是 Object.prototype！！！// 问题: f 是否有 a b c方法1.var F = function () { };Object.prototype.a = function () { console.log('a') };F.prot...

2019-09-06 09:33:59 540 2

原创 es6 类的继承

首先是 super(), class 的继承必须要在子类里面调用 super()方法, 子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。得到子类自己的this，举个栗子{ class Father { constructor() { this.name = 'test';...

2019-08-13 16:29:30 162

原创简易的 react 脚手架

// webpack.common.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const CopyWebpackPlugin = requi...

2019-07-05 16:21:16 191

原创利用 jsonp写的一个简易百度搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

2019-06-17 17:08:19 226

原创 301,与 302

301 永久重定向当用户访问 /, 直接跳转到 /new, 返回/new 的数据第二次再次访问 /, 因为已经被永久重定向了，所以直接经过浏览器跳转到 /new，也就是直接到了 /new, 而不需要再次经过服务器由 / 跳到 /new。301 ，访问 / 返回的数据，会被缓存下来，造成的后果是，就算你更改了访问 / 的数据，但是因为访问 / 的时候，数据被缓存了，所以还是会显示第一次...

2019-06-05 11:45:10 803

原创关于vue v-for的key，和react里面的key

key 值：为了虚拟dom能够快速找准对应的节点，进行对比，极大的提升虚拟dom对比速度，也减少了不必要的遍历举个栗子：let arr = [1, 2, 3, 4, 5]把这个 arr渲染为虚拟dom节点，每个虚拟dom节点上面都存在 key值。key值绑定的都是它们自己发生改变: let arr = [2, 3, 4, 5]了。生成新的虚拟dom节点(4个)，新的虚拟dom和旧的...

2019-05-26 15:38:02 401

原创关于 copy-webpack-plugin 的用处和使用

webpack打包的时候，使用 html-webpack-plugin ，在template指定的demo.html 里面引入的本地的一些script 文件，打包之后，总是会报这里文件找不到，看下面：//这是在这个demo.html里面引入的本地test.js 文件<body> <script src="js/test.js"></script> ...

2019-05-25 11:09:07 15872 4

原创对vue实现数据实时更新，render() 函数的一些理解

首先说下自己对render() 函数的理解<div id="app"> <--app包裹的整个都属于模板，模板并不是html，只是类似于html，其实是字符串--> <p>{{name}}</p> <p v-if="isShow">{{age}}<p></div>vue的模...

2019-05-23 16:05:35 5826

JDDDDDDyaya的博客