王春燕的博客

尤大大从下面的三个前端领域的不同层次来展开了介绍：开发范式&底层框架（注：大家比较熟悉的Vue、React这些框架层面）工具链（注：像webpack这样的构建工具）上层框架（注：例如Next.js、Nuxt.js）正式分享之前，尤大大提出声明：“本分享只代表讲着个人观点，因为自己是框架和构建工具的作者，肯定会包含利益相关和个人的偏见，但是分享中会尽可能做客观的看法，大家多多多包涵”，下面就让我们饱享这顿“美味”吧！...

我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令...

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件

Vue一些常用命令：1.安装vue-clinpm install --global vue-cli2.创建一个基于 webpack 模板的新项目vue init webpack 项目名称3. 安装依赖：cd 项目名称npm install3运行：npm run dev4.安装vue-resource插件（通过XMLHttpRequest或JSONP发起请求并处理响应 //get post请求）：npm install vue-resource --save......

一、Spa单页面的加载过程二、首页加载慢的原因三、加载速度慢解决方案1、分离打包第三方资源包2、第三方库使用CDN引入3、vue-router路由懒加载4、静态资源压缩，代码压缩，图片压缩5、不要滥用三方库6、去掉编译中的map文件7、代码层面的优化四、解决白屏，体验优化...

一、token是什么Token:访问资源的凭证。一般用户通过用户名密码登录后，服务端会将登录凭证做数字签名，加密之后的字符串作为Token。并在客户端后面的向服务端的请求中携带，作为凭证。二、token一般存放在哪里？token 在客户端一般存放于localStorage、cookie、或sessionStorage，vuex中。......

一、小程序和H5　　1、“老板”不一样，H5是由W3C做的一个开放标准规范，微信小程序是腾讯自己的封闭规范。　　2、运行环境不一样，H5的是开放的，可以运行在任何符合H5标准的容器（浏览器等）内，微信小程序相对来说是封闭的，只能在微信里运行（目前是这样），但是未来应该会越来越开发。　　3、开发方式不一样，H5就是一个网页，所有网页开发技术都可以应用在H5开发上，微信小程序必须符合微信制定的规范。从实际开发体验看，做一个微信小程序更像是做了一个App，但是不需要这么强的去做适配。　　4、获取到

 v-model其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。v-model是vue的一个语法糖,通过v-bind去单项绑定vue实例里面的data数据，然后再通过各种事件比如@change @input等去进行触发事件,从而达到修改实例数据的值...

一、EventBus的简介二、使用方法第一步：2种方式初始化第二步：发送事件第三步：接受事件第四步：移除事件三、全局EventBus四、EventBus的优缺点一、EventBus的简介EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以平行的接到到相对应的数据。...

路由器（vue-router）有两种工作模式：hash模式和history模式，默认是hash模式。

router-view 实现路由内容的地方，引入组件时写到需要引入的地方，需要注意的是，使用vue-router控制路由则必须router-view作为容器。路由跳转4种方式1、 标签路由 router-link2、编程式路由 this.$router.push()3、this.$router.replace()（与this.$router.push()类似）4、this.$router.go(n)5、this.$router.push()、this.$router.replace()、....

遇到重复请求的问题，即一次请求还没有执行完毕，用户又点击了一次，这样重复请求会造成后台数据异常。又比如在查询数据的时候点击了一次查询，还在处理数据的时候，用户又点击了一次查询。第一次查询执行完毕页面已经有数据展示出来了，用户可能正在看呢，此时第二次查询也处理完返回到前台把页面刷新了，就会造成很不好的体验。...

​一、路由传值：1、通过路由的路径带参数（url中显示参数），同时配置路由的时候也要带上参数，获取参数使用this.$route.params.id，直接拿路由里面的参数。2、不用在router.js路由页配置参数来接收（url中不显示参数，刷新页面会丢失传递过来的参数），而是通过name或者path去跳转（name和path写法一样，区分name和path）​...

目录一、事件修饰符二、 v-model的修饰符三、键盘事件的修饰符四、element的修饰符 (面试回答加分)一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事

一、框架简介React主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。React的官方网站提到了“学习一次，随处写作”这个关键功能，可以使用React框架在JavaScript中构建移动应用程序。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个...

一、什么是VueVue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架Vue在构建用户界面时，能够编写结构：vue提供指令、数据驱动视图构建页面的结构 美化样式：基础css样式即可美化 处理交互：基于vue提供的事件绑定，可轻松处理用户和界面之间的交互行为二、Vue的特点和优势vue两大特点：响应式编程、组件化。vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使

标签绑定一个事件处理函数，然后在相应的事件处理函数中调用想要触发的多个处理函数以下两种方案，都可以实施第一种<button id="test" @click="test1">按钮</button>new Vue({ el:"#test", data:"", methods:{ test1:function(){ alert("test1"); this.test2();

目录一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结 是一个轻量的 客户端基于 服务来执行 请求，支持丰富的配置，支持 ，支持浏览器端和 端。自2.0起，尤大宣布取消对 的官方推荐，转而推荐 。现在 已经成为大部分 开发者的首选。安装导入发送请求并发请求二、为什么要封装 的 API 很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次请求，就要把这些比如设置

一、uni-app 和 Vue2 的区别1、组件/标签的变化以前是html标签，现在是小程序标签。div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video这些还在。 select 改成 picker iframe 改成 web-view ul、li没有

原因：由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降解决方案：第一种：将 v-if 和 v-for 分别放在不同标签中<ul v-if="active"> <li v-for="(item, index) in list" :key="inde"> <p>{{item.name}}</p&

目录一. vue2和vue3双向数据绑定原理发生了改变二. Vue3支持碎片(Fragments)三. Composition API四. 建立数据 data五. 生命周期钩子 — Lifecyle Hooks六.父子传参不同，setup() 函数特性七. vue3 Teleport瞬移组件一. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订

vue 的 computed 和 watch 要在哪些场景下使用，其实也就是在问他们的区别。一、computer当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。代码演示<p id="app"> {{fullName}} </p><script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo',

delete和和Vue.delete都是对数组或对象进行删除的方法。这两种方法对于对象来说其实是没有区别的，使用方法会直接删除对象的属性（物理删除）let obj = {name: 'fufu', age: 20}// delete obj.age => {name: 'fufu'}// Vue.delete(obj, 'age') => {name: 'fufu'}// 测试发现对于对象来说delete和Vue.delete是没有任何区别的但是这两种方法对于数组来说

目录一、Vuex是什么？二、我们什么时候应该用到Vuex呢？三、对于使用Vuex的理解是什么？四、vuex由五部分组成(五种状态/五种属性)五、安装配置六、详解五种状态1、state初始化statemapState2、mutations基本操作mapMutations3、action基本使用mapActions4、getters用法5、modules七、数据持久化1. 安装2. 使用一、Vuex是什么？介绍：Vuex

一.vuex是什么？怎么使用？哪种功能场景使用它？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。场景：多个组件共享数据或者是跨组件传递数据时，比如：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车怎么使用？vue框架中状态管理。在main.js引入store，注入。新建了一个目录store.js，...

一、什么是生命周期？生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；通俗说就是Vue实例从创建到销毁的过程，就是生命周期二、什么是生命周期钩子函数都有哪些？分别是什么意思？...

1.什么是vue生命周期？答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。2.vue生命周期的作用是什么？答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3.vue生命周期总共有几个阶段？答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。分别是： beforeCreate(创建前) c...

一、访问器属性关于Vue的双向绑定，核心是Object.defineProperty()方法，语法：Object.defineProperty(obj, prop, descriptor)其中：obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。 其实，简单点来说，就是通过此方法来定义一个值。调用，使用到了get方法，赋值，使用到了set方法。...

目录一、父传子1、props 属性传递2、方法传递3、 $parent获取方法和属性二、子传父1、 属性传递2 、通过$refs主动获取子组件方法和属性3 、通过$children主动获取子组件方法和属性三、兄弟间的通讯1 、通过共同的父亲进行传递信息2、全局事件总线—EventBus3、 通过PubSub通讯4 、通过Vuex通讯组件之间传值通讯分为三种: 父传子、子传父、兄弟组件之间的通讯;前提这里我们使用了vue/cli4使用默认配.

Vue实现了MVVM模型，将数据和表现进行了分离，我们只需要更新数据就能使DOM同步更新，但是某些情况下，还是需要获取DOM元素进行操作本文主要介绍几种在Vue中获取DOM元素的方法1、使用DOMAPI直接找元素<script> ... mounted () { let elm = this.$el.querySelector('#id') }</script>Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元...

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失。出现这个问题的原因是：因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方案一：利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存第一种写法： 由于state中的数据是响应式的，而数据又是通过mutation来进行修改，故在通过mut...

后端为了安全，token一般存在有效时间，当token过期，所有请求失效解决方案：方案一：在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。优点： 在请求前拦截，能节省请求，省流量缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败使用方法：axios.interceptors.request.use() 这个请求前拦截方法方...

一、vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期。`Vue一切是数据为核心，使用数据来驱动视图刷新，我们不建议去操作dom`二、为什么要用Vue？1. 组件化Vue将组成一个页面的...