qq554244261的博客

在学习中了解到，v-model实际上只是一个语法糖。并且Vue3对v-model的逻辑进行了重写。于是决定对Vue2和Vue3中对于v-model的实现进行探究。v-model中触发的事件v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作

router1、按需加载（lazy-loaded） { path: '/login', name: 'Login', component: () => import('../views/login/Login.vue') }2、router的常用方法1)useRouter方法，可以通过import引入，通过它可以获得路由实例。const router = useRouter()2)router.beforeEnter方法，可以在每个路由中添加，用于在进入前

由于Vue3是兼容Vue2代码的，所以原来的watch用法也是可以使用的。但是我们可以通过引入，在setup内部使用watch。1、watch多个值，第一个参数变为数组reactive对象在结果数组中显示Proxy2、在watch中把响应对象的属性用 xxx.pro拿出来也是没有响应效果的，可以 ()=> xxx.data来实现返回一个响应值...

1、直接使用npm安装，然后在main文件中引入即可。import 'normalize.css'2、创建一个style文件夹，创建一个base.scss文件，定义html标签的font-size属性作为rem的单位值。一样在main文件中引入import './style/base.scss'不同的浏览器在对于CSS没有定义的一些样式属性是不一样的，比如没有在自己的CSS里面规定超链接有没有下划线的时候，有些浏览器有，有些浏览器没有；再比如有一些浏览器规定的超链接默认颜色是蓝色，有一些又

Proxy的意义proxy相当于对象的一个替身，我们可以直接对对象进行操作也可以 通过proxy代理对对象进行操作。在proxy中可以设定一些拦截器来对原本默认的一些操作进行复写从而对操作起到过滤作用。虽然Proxy实例也是用new操作符和构造函数生成的，但是他的prototype是undefined代理的途径——捕获器（拦截器）ES5中拦截的做法——Object.defineProperty()/Object.defineProperties()这两个方法可以对属性进行配置、拦截。前者有三个参数

原始值和引用值动态属性引用值可以随时添加、修改、删除属性，原始值不行（但是添加时不会报错，读取时会是undefined）这里发现一件很有意思的事情，原始值可以直接使用原始字面量定义，也可以使用new关键字搭配包装类型定义let a = 'aaa'let b = new String('bbb')使用new关键字和包装类型定义的时候，会创建一个Object类型的实例，但是他的行为类似原始值。这种情况下是可以加属性的a.name = 1 // undefinedb.name = 1 //

11

slice是返回引用数组选定段的元素组成的一个新数组。concat是返回一个拼接后的新数组。两种方法都不会改变原来的数组。区别：参数不同，功能存在相似性但是针对性不同。concat()参数是若干个数组，会将数组中的元素合并。主要是用于数组的拼接。slice()参数是start和end，均可选。主要是从特定位置截取元素组成新数组。...

Typescript将动态类型语言的JavaScript变为了静态类型语言。主要是使用了一个tsc编译器。在终端中使用tsc命令可以将ts文件转化为相应的js文件tsc xxx.ts原始数据类型和Any类型ES中有7种原始类型和一个ObjectTS中的Any类型允许赋值为任何类型数组和元组数组TS这里的数组是对元素的类型进行了约束的，类型写在[]前。let arrNum:number[] = [1,2,3]这里需要注意的是，伪数组都是有自己特定的类型的元组那么在TS中如何将不同

nvmnodejs版本管理工具，可以切换多个nodejs版本。nvm-list 查看当前所有版本nvm install vxxxx 安装指定版本nvm use ——delete-prefix xxx切换到指定版本nodejs和js的区别ECMAScript只有语法和词法，写js和nodejs都要遵守。javascript基于ES的语法规范，外加了Web API。（所以很多东西在nodejs里用不了，因为是Web API）nodejs基于ES的语法规范，外加了nodejs API。

node_modules 存储第三方的依赖模块public index.html是整个项目默认的html模板 favicon.ico是浏览器上的图标.editorconfig 编辑器的默认配置babel.config.js 配置Vue里面babel的配置package.json 放的是依赖文件的信息（版本啥的）package-lock.json 保证反复安装时版本的正确README.md 写的是项目描述性内容src目录（最重要）main.js 项目的入口文件，创建根组件，引入VueX和.

Vue2遇到的问题Vue2对于复杂组件的代码难以维护。怎么理解这句话呢？在使用Vue的过程中可以发现，各部分是按类型来区分的，比如data、methods等等。这就使得实现一种功能的代码分散在不同的地方，当功能越来越多越来越复杂的时候就很难整合维护了。而且不同功能的数据可能互相依赖，对后续的维护增加了很多难度。针对这一点，Vue2可以采取Mixin来进行改进。把代码归为一类然后使用。但是：Mixin会导致命名冲突。不能很好的暴露出来变量的作用。重用到其他的组件中经常会遇到问题。所以就出现了

1

ES6

数值扩展ES6二进制和八进制ES5中将十进制转为二进制（使用toSting(),本身是转为字符串的，使用参数可以起到改变进制的效果）const num = 5;console.log(a.toString(2)二进制转为十进制（使用parseInt()，第一个参数为要转换的数字，可以转为整型。如果使用第二个参数，就可以把当前的数当做几进制然后转化）const b = 101;console.log(parseInt(b,2);对二进制和八进制的表示（加前缀，二进制0B，八进制

JS单线程内容的复习所谓单线程就是一个时间只能执行一个内容。因为JS是单线程的，所以有回调函数的存在（异步，即不是立刻执行）。同步操作和异步操作的顺序异步的内容会被放入Event Table中，当要触发时，会被放入Event Queue。待主线程执行完毕后，会轮询异步任务。说Ajax之前得先说一下JSON类Ajax原理Ajax可以进行异步的局部刷新（Vue中Router的基本原理？）一个API：XMLHttpRequestlet xmlhttp = new XMLHttpRequest()

在学习的过程中，

ES5数组的遍历方式for循环forEach() ：没有返回值，针对每个元素调用func，循环中途无法跳出。（参数：一个方法（方法里的参数：element，index，array））map() ：返回新的Array（由每轮循环的返回值组成），每个元素为调用func的结果。（参数：一个方法（方法里的参数：element，index，array））filter() ：返回符合func条件的元素数组。（参数：一个方法（方法里的参数：element，index，array））some

对数组（按顺序的,因为是按下标索引的）1let [a,b,c] = [1,2,[3,4]];console.log(a,b,c);显示 1，2，(2)[3,4]2let [a,b,[c]] = [1,2,[3,4]];console.log(a,b,c);显示 1，2，3所以结构赋值不一定是完全对应的，可以是按顺序对应一部分。3let [a,b,c,d] = [1,2,[3,4]];console.log(a,b,c,d);显示1，2，(2)[3,4],undefined4

VueX包含四个部分:state、mutations（mutation是改变的意思）、actions、modules。VueX的使用目的：VueX可以管理数据（之前学过的数据管理方式：1、父子组件传值2、provide和inject全局传递数据）。但是当项目做大后，有了几十个页面，使用VueX就显得更加合适了。（经过学习终于可以理解以前看到的那句话了，对于小的项目确实不需要用到VueX，因为前面提到的两种数据管理方式就可以解决问题了）。stateVueX创建了全局唯一的仓库用来存放全局的数据。st

全局组件通过根组件的component方法来创建。比较简单，只要定义了在这个实例的哪里都能用。但是性能不好，因为没用到也会一直挂在在这个实例上。const app = Vue.createApp({});app.component('组件名',{内容：template以及各种函数和数据}) 局部组件注册后才会挂载，性能比较高。注意命名。本身就是一个对象，需要在根组件中注册。脚手架中使用的就是这种方法。在ES6语法中，注册的内容会寻找相同名称的变量（就是我们写好的局部组件），所以只要写一个名称就

把组件的Dom元素传送到其他位置展示。使用情况举例：有时候我们在一个组件中点击按钮，想要跳出一个蒙层把整个屏幕都遮盖住。在之前的项目中我试过这种蒙层，但是用的是具体数值，这样在适应性上可能就比较low了。如果使用以下代码就能实现完美适应屏幕大小了。{ top:0; right:0; buttom:0; left:0;}但是这个时候根据子绝父相就会出现问题，如果我们的这个组件也是采用定位（absolute、relative、fixed）了呢？这个蒙层就只能覆盖这个组件了。这个时

全局指令下面是针对光标聚焦写的一个自定义指令。使用directive方法可以定义一个指令，定义的指令名XX可以通过v-XX来给标签使用。标签使用指令时，指令定义中的生命周期函数可以接收到挂载的元素，从而对元素进行操作。const app = Vue.createApp({ template:` <div> <input v-focus /> </div> `}); app,dire

使用Vue实现基础的CSS过渡与动画效果过渡是指从一个状态到另一个状态动画是指位置改变设定动画：1、设定动画内容@keyframes 动画名 { 0%{ } 50%{ } 100%{ }}2、把动画放在类中.animation{ animation:动画名 时间长度;}3、在Vue的data中写一个对象（使用之前学过的用对象来绑定类名）animate：{ 前面写的类名:true/false}标签中：<div :class='animate'

把通用性的功能封装起来插件定义install表示插件运行时走的逻辑。app是Vue的实例，options是传递的参数。app.provide(‘name’,‘Leon’)扩展了一个内容为Leon的name属性。也可以使用app.directive/mixin扩展指令或混入。可以认为是mixin的一种加强，可以扩展你想扩展的任何东西。const myPlugin = { install(app,options){ app.provide('name','Leon') }}

1

组件中的mixins属性中可以放入一些对象。局部的mixin和局部组件很像，定义一个变量，使用时要注册。全局的mixin也和全局组件很像，使用根组件.mixin({})。一般使用局部mixin。1、组件中的data、methods优先级高于mixin中data的优先级。如果组件的data中没有相应属性，就会使用混用的。2、生命周期函数也可以使用混入的。**而且不会被组件中的生命周期函数覆盖掉。**会先执行混入的，再执行组件中的。3、局部的mixin中的值如果想在子组件中使用，在子组件中也需要注册

1

关于闭包的学习，之前已经进行过，是通过自由变量来理解的并知道他可以形成一个私有变量的效果。今天再次回顾闭包这个概念，并强化了两个概念——词法作用域和函数是一等公民，突然觉得闭包这个概念是水到渠成的，而不是强制性加上的。词法作用域首先要说词法作用域，关于自由变量的概念之前就已经了解过了，那么，为什么会出现自由变量这种在函数原来位置开始往上查找的情况呢？这里就要用词法作用域来解释了。词法作用域的概念是：函数的作用域是在函数定义时就确定了的，并不是函数运行时确定的。所以函数的作用域其实一直都是他定义时的那

今天看到一篇专门讲解this对象的文章，感觉真是醍醐灌顶，对于this的理解更加深刻了。非常感谢作者的分享！传送门：https://blog.csdn.net/dwb123456123456/article/details/85071301接下来我对该文章内容进行总结，方便自己日后的知识整理和复习。首先是对函数的分析这一部分是让我大开眼界的。按照以前的理解以一下形式运行函数不应该是最常见的吗？func(a,b)但是文章中提到，这其实是一种语法糖真正的调用是通过call()方法实现的。以前我一

Symbol本来有六种（Number、String、Object、Undefined、Null、Boolean）一种新的原始数据类型（就是有七种了）Symbol可以通过其英文含义标志、象征来理解，标志、象征是独一无二的。所以Symbol的第一个特征是，两个Symbol对象之间永远是不等的。Symbol可以认为是一种不会相等的字符串定义Symbol输出这里要注意，Symbol和Number、String、Object不一样，他是没有包装类型的，加new是会报错的let s1 = Symbol()

首先应该明确的一点是，JS中是没有类这个概念的（和C#中的类完全不是一个概念）。就算是ES6的class也只是一种语法糖，其底层的原理还是和原来一样的。ES5ES5中所谓的类就是我们经常写的构造函数。基于书写规范，构造函数名首字母最好大写function MyClass(name,age){ this.name = name; this.age = age;}let man = new MyClass(A,18);关于类与继承，原型链肯定就是绕不开的话题。（原型的具体内容在另一篇文章

基础知识备忘&&和||a&&b 一个条件为false就不再判断a||b 一个条件为true就不再判断正文在之前的学习中，了解到JS中对于形参的要求十分宽松。是否全部传入都可以运行，只不过没传入的会是undefined。这在C系语言里面是不能实现的。在ES6中，参数可以设置默认值function go(a,b='qwer'){}这样对于一些固定值就可以减少代码量。那么将参数和解构赋值结合会有什么效果呢？如前面学习所知，结构赋值两侧的结构要匹配上，所以

1

在学习node.js的过程中发现有很多的ES6语法。感觉在进一步学习之前还是得先把ES6系统性的学习一下，巩固一下基础。这样后续的学习应该会效率更高。兼容性问题（学习转化，并观察差别）ES6可以通过BABEL转化为ES5语法来避免兼容性问题1.安装Live Server插件作用：每次ctrl+s后页面就会自动刷新。会使用http协议打开，避免一些功能禁用。2.常量与变量不同，常量是只读不可写的（在C系语言中，定义时加个const）。在ES6中，可以直接用const定义一个常量const in

1.Node三大模块全局模块（对象）系统模块（内置的东西）自定义模块（写的）全局模块（随时能用，不用引用）案例：process.env环境变量（就是environment缩写）就是电脑高级设置中可以查看到的一些变量。（可以用作标识？）打印出来可以看到有存放地址的也有各种字符串的（保存各种设置，比如根目录、用了哪种编码标准等等。）系统模块（重点）（要引用（require），不用下载）案例：1.path（router路由中要配置的东西，这里有什么区别呢？）此处的path用于处理文件路

npm之前一直使用npm但是对这个技术并没有一个形象的概念，只知道是一个包管理工具。使用npm的好处是啥？如果不使用npm的话，我们就需要在文件的head中引入（使用<script><script>）如果依赖文件过多，会显得不简洁。还有一点是我的猜想，就是如果都是用head处引入依赖文件的话，会影响页面的响应速度。（之前用vue没发现有响应延迟可能是因为Vue是轻量级框架，本来就没多大所以几乎没影响）。npm的具体使用当我们安装node.js时，npm也会自动安装，但是

11-6 算法JS中的遍历方法（借鉴了网上的其他文章内容）1.for循环一种优化版的for循环，将长度缓存起来，避免重复获取数组长度for(let i = 0,a = arr.length;i < a;i++)2.for of用于遍历数组元素3.forEach()arr.forEach(element =>{})或arr.forEach((item,index,arr)=>{})(印证前一篇说的箭头函数可以将外圈函数中的参数类型拿来用）索引和数组不是必选注意：fo