公司:捷通华声
1.实现多个具有数据依赖的异步请求加载?promise原理?
1.可以将异步变为同步执行,只不过效率偏低:
es7的await将异步转同步;
juery的ajax设置async:false
2.异步处理(不嵌套):
es6的Promise可以实现:
china().then(jiangshu).then(xian).then(function(data){console.log(data)
})
Promise.all([promise1, promise2, promise3]).then(function(values) {console.log(values);
});
不用es6以上的情况,用jquery也可以:
var d1 = $.ajax();
var d2 = $.ajax();
$.when( d1, d2 ).done(function ( v1, v2 ) {});
3.异步处理(嵌套):
在a接口的成功回调里执行b,在b接口的成功回调里执行c
//promise实现
在Promise的内部,有一个状态管理器的存在,有三种状态:pending、fulfilled、rejected。
(1) promise 对象初始化状态为 pending。
(2) 当调用resolve(成功),会由pending => fulfilled。
(3) 当调用reject(失败),会由pending => rejected。
因此,看上面的的代码中的resolve(num)其实是将promise的状态由pending改为fulfilled,然后向then的成功回掉函数传值,reject反之。但是需要记住的是注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变(记住,一定要记住,下面会考到)。
当状态为fulfilled(rejected反之)时,then的成功回调函数会被调用,并接受上面传来的num,进而进行操作。promise.then方法每次调用,都返回一个新的promise对象 所以可以链式写法(无论resolve还是reject都是这样)。
//promise原理 -- 发布订阅模式
发布者存在一个数组list用于缓存成功的回调(onResolve)和失败的回调(onReject)的函数,等到一定条件下执行emit,订阅的异步函数都会执行。
2. vue生命周期?销毁生命周期里能干那些事?那在销毁生命周期里清除缓存,页面刷新时会执行吗?
我们从destroyed的字面意思可知,中文意为是“销毁”的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如:
// 销毁监听事件
destroyed() {clearInterval();window.removeEventListener('resize', this.resizeWin)
}
// 页面刷新
在页面刷新时,实例依次执行了beforeCreate(),created(),beforeMount(),mounted(),beforeUpdate(),updated()。并没有来得及执行destroy,与把页面关闭再重新打开的效果是一样的。所以在beforeDestroy或destroyed时执行的代码,要额外考虑一下对页面刷新的处理。
3. vue自定义指令?如何利用自定义指令封装自定义插件?用过哪些自定义插件?
Vue.directive(‘参数名称’,{}) 定义全局指令,它有两个参数
参数1:指令名称,注意在定义的时候,指令名称前不需要加 v- 前缀,但是在调用的时候,必须加v- 前缀。
参数2:参数2是一个对象,这个对象身上有一些指令相关的函数(也就是下边介绍的钩子函数),这些函数可以在特定的阶段,执行相关操作。
例子:
<div><input type="text" v-autoFocus><!-- 让input元素在打开页面的时候就获得焦点 -->
</div>
Vue.directive('autoFcs',{// 钩子函数,被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。inserted(el){el.focus()console.log( 'inserted' );},// 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。bind(){console.log( 'bind' );},// 所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。// 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 update(){console.log( 'update' );},// 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。componentUpdated(){console.log( 'componentUpdated' );},// 只调用一次,指令与元素解绑时调用。unbind(){console.log( 'unbind' );}
})
// 利用自定义指令封装自定义插件// 常用的自定义插件
1.Vue-ScrollTo:这个指令监听元素的点击事件,然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。
npm install --save vue-scrollto
2.Vue-Lazyload:图片懒加载,非常方便。
npm install --save vue-lazyload
3.V-Tooltip
几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip,并可控制显示位置、触发方式和监听事件。
还有一个比较流行的tooltip插件vue-directive-tooltip.
npm install --save v-tooltip
4.V-Scroll-Lock
基于 body-scroll-lock 开发,这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。
npm install --save v-scroll-lock
5.V-Money
安装: npm install --save v-money
如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是它!一行代码搞定这些需求:
6.Vue-Infinite-Scroll
安装: npm install --save vue-infinite-scroll
无限滚动指令,当滚动到页面底部时会触发绑定的方法。
7.Vue-Clampy
安装: npm install --save @clampy-js/vue-clampy
这个指令会截断元素里的文本,并在末尾加上省略号。它是用clampy.js实现的。
8.Vue-InputMask
安装: npm install --save vue-inputmask
当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask library 开发。
9.Vue-Focus
安装: npm install --save vue-focus
有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。
,vue自定义指令,vue按需加载,如何在ui框架组件上定义的方法里带参数,echarts怎么自定义改样式,原生js实现多个异步请求加载,vue组件的异步加载,闭包实际用法,原生js如何实现一个深拷贝,nextTick原理,
this.flag = true;this.flag = false;this.flag = true;页面怎么执行?