箭头函数与普通函数区别 箭头函数是匿名函数，不能作为构造函数，不能使用new// 箭头函数let fun = () => { console.log('我是箭头函数');})// 普通函数function fun(){ console.log('我是普通函数');}
async、await 前言async是同步的写法，但是异步的操作，也是异步编程的解决方案特点asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的async/await的优点方便级联调用，即调用依次发生的场景；同步代码编写方式，更符合代码编写习惯；多个参数传递， Promise的then函数只能
Promise 概念promise是es6提出的一种异步编程的解决方案promise的实现（原理）：promise本质上是一个构造函数 ，它接收一个函数作为参数 该函数接收两个参数 分别是resolve和reject 他们也是函数特点Promise对象的状态不受外界影响1）pending 初始状态2）fulfilled 成功状态3）rejected 失败状态Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其 他任何操作都无法改变这个状态Promise的
关于vue给对象新增属性页面不会动态更新的问题 问题当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。举个例子<template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data(){ return {
Vue中的$nextTick() Vue中的$nextTick()的作用在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM原理vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。应用场景1. 在created里面获取dom节点2. 改变数据之后立刻获得dom节点，进行逻辑操作例如点击按钮出现input框，并获取焦点showInp
vue之prop Prop单项数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。<!-- 测试单向数据流 -->父组件 <h1>{{msg}}</h1><test-single-data-flow :msg="msg"></test-single-da
V-for中为何要使用key 一、Key是什么？key的作用又是什么？key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点场景背后的逻辑场景1: 当我们在使用v-for时，需要给单元加上key如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如
vue中的slot插槽 插槽slot插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。插槽的分类：默认插槽，具名插槽，作用域插槽1. 默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据子组件：<div> <slot></slot></div>父组件：<heads>你好</heads>
vue使用keep-alive缓存页面优化项目 概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max 数字。可以缓存多个组件实例对
Vue-Router 前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash 和 history一、如何设置路由模式const router=new VueRouter({ mode:'history / hash', routes:[...]})# mode:'hash' 默认地址栏会多一个#符号：http://localhost:8080/#/login# mode:
vue自定义过滤器 前言过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器<script> export default { data() { retur
vue自定义组件 使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间重复性在项目中是如何封装组件的我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功
vue中的修饰符 事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后 才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!
mvvm和mvc 前言MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view相同，不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别，因为MVP好像不是很常用。一、mvvm概念:MV
vue中Computed、Methods、Watch区别 computed计算属性 计算结果会缓存,只有当依赖值改变才会重新计算对于任何复杂逻辑，你都应当使用计算属性// 而是依赖于属性的,就是一个属性的封装,属性的值不变化,那么不会多次调用computed,所以性能更好计算属性默认只有getter，可以在需要的时候自己设定setter：computed: { fullName: { // getter get: function () { return t
vue监听和深度监听watch 前言watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是：{{person.name}}</p> <p>你的年龄是：{{p
vue组件通信 前言Vue组件通信有父传子、子传父、兄弟通信三种通信方式一、父传子在父组件的子组件标签上绑定自定义属性，挂载要传输的变量。在子组件中通过props来接受数据1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量
Y18给你讲解vue虚拟dom,diff算法 一、vue中的虚拟dom什么是虚拟dom？虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述为什么要创建虚拟dom?创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。二、vue中的diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用
vue双向数据绑定原理 vue双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数
Vue自定义指令 前言vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时……
关注
