v-show 和 v-if 指令的共同点和不同点?
1)相同点:
v-show 和 v-if 都能控制元素的显示和隐藏。
2)不同点:
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
3)编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部
的事件监听和子组件
4)编译的条件
v-show 都会编译,初始值为 false,只是将 display 设为 none,但它也编译
了
v-if 初始值为 false,就不会编译了
5)性能比较
v-show 只编译一次,后面其实就是控制 css,而 v-if 不停的销毁和创建,
故 v-show 性能更好一点。
注意点:因为 v-show 实际是操作 display:" "或者 none,当 css 本身有 display:
none 时,v-show 无法让显示
总结(适用场景):如果要频繁切换某节点时,使用 v-show(无论 true 或者 false
初始都会进行渲染,此后通过 css 来控制显示隐藏,因此切换开销比较小,初始
开销较大),如果不需要频繁切换某节点时,使用 v-if(因为懒加载,初始为 false
时,不会渲染,但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的,因
此初始渲染开销较小,切换开销比较大)
vue如何禁止弹窗后面的滚动条滚动?
methods : {//禁止滚动stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动},/***取消滑动限制***/move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);}
}
如何在vuex中使用异步修改?
在调用vuex中的方法action的时候,用promise实现异步修改
const actions = {
asyncInCrement({ commit }, n){
return new Promise(resolve => {
setTimeout(() => {
commit(types.TEST_INCREMENT, n);
resolve();
},3000)
})
}
}
Vue-Router 有哪几种路由守卫?
路由守卫为:
全局守卫:beforeEach
后置守卫:afterEach
全局解析守卫:beforeResolve
路由独享守卫:beforeEnter