田兴的博客

导入项目时发现每个项目都会有这个备份文件解决办法，控制台进到对应目录下执行find . -name "._*" | xargs rm -f

先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的

什么是状态管理在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。在前面我们是如何管理自己的状态呢？在Vue开发中，我们使用组件化的开发方式；而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行

认识前端路由路由其实是网络工程中的一个术语：在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段；前后端分离阶段；单页面富应用（SPA）；后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的.服务器直接生产渲染好对

vue2中Options API的弊端在Vue2中，我们 编写组件的方式是Options API：Options API的一大特点就是在对应的属性中编写对应的功能模块； p比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；但是这种代码有一个很大的弊端：当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分

认识mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。n 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：pMixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；p一个Mixin对象可以包含任何组件选项；p当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；Mixin的基本使用Mixin的合并规则如果Mixin对象中的选

管理 Node 版本的工具有 n 和 nvm。n 不支持Windows安装npm install -g n常用命令n <version> // 下载某一版本号node e.g：n 10.16.0n latest // 安装最新版本n stable // 安装最新稳定版n lts //安装最新长期维护版(lts)n rm <version> // 删除某个版本 e.g：n rm 10.16.0n // 输入命令后.

项目搭建vitenpm init vite-app <projectName> //或者yarn create vite-app <projectName>vue-cli如果已经全局安装过旧版本的vue-cli，先卸载。npm uninstall vue-cli -g //yarn global remove vue-cli安装新版@vue/clinpm install -g @vue/cli //或者 yarn global add @vue/cli

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.b.

1. 下载dayjscnpm install dayjs --save2. 创建untils/formate.jsimport dayjs from 'dayjs'import rTime from 'dayjs/plugin/relativeTime'// 全局使用中文dayjs.locale('zh-cn')// 对时间进行格式化export function formatTime(data = new Date(), type = 'YYYY-MM-DD') { return

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped1、stylus的样式穿透 使用 >>>备注: 不太推荐使用这种方式,据说有点问题！.wrapper >>> .swiper-pagination-bullet-active { background: #fff}2、sass 和 less 的.

github下载地址：https://gitee.com/h5web/devtools-6.0.0-beta.151.下载Github源文件 devtools-6.0.0-beta.15git clone https://gitee.com/h5web/devtools-6.0.0-beta.15.git2.打开终端，切换到devtools-6.0.0-beta.15文件夹所在目录：cd devtools-6.0.0-beta.153.安装所需npm依赖包，这里建议用国内淘宝的镜像：安装好c

1.安装依赖：命令行：引入相应的axios和vue-axioscnpm install axios vue-axios -S2.axios封装接下来我们使用class来封装，而不是传统的函数封装，因为类更具有封装性，更加灵活。2.1创建request.jsimport axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';import {message, notification} from 'ant-d

ts typescript Typescript

重新安装一次，如果还是不可以的话，在把之前装的都清空rm -rf node_modulesrm package-lock.jsonnpm cache clear --forcenpm install

一、什么是函数节流（throttle）首先函数节流的概念是什么？限制一个函数在一定时间内只能执行一次。举个栗子：接下来，我给大家举个栗子，。二、为什么需要函数节流前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很

生成一个react项目构架create-react-appcreate-react-app官方的一个生成react项目,安装时后面跟一个项目名称，需要在一个空的文件夹下安装create-react-app 安装的时候会自动帮我们下载react(需要的react)，react-dom(主要是渲染)，react-script(可以认为继承了webpack的脚手架)加-g是全局安装安装create-react-appnpm install create-react-app -g//mac 安

什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。什么是重绘？页面中，某些元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变应用场景：（减少回流

目录前端代码规范一．编程规约(一) 命名规范1.1.1 项目命名1.1.2 目录命名1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名1.1.4 命名严谨性(二) HTML 规范 （Vue Template 同样适用）1.2.1 HTML 类型1.2.2 缩进1.2.3 分块注释1.2.4 语义化标签1.2.5 引号(三) CSS 规范1.3.1 命名1.3.2 选择器1) css 选择器中避免使用标签名2) 使用直接子选择器1.3.3 尽量使用缩写属性1.3.4 每个选择器及属性独占一行1.3

前言：新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题：关于对象： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。关于数组： Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] =