殷秀梅,共享:vue运用技巧和项目中遇到的问题,黄页88网

这儿给咱们同享一下vue中的一些技巧,期望对咱们有用途。(话不多说上代码)

1,vue路由阻拦浏览器撤退完成表单保存相似需求(为了避免用户忽然脱离,田爱青没有保存已输入的信息。)

//在路由组件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
多情总裁地下妻if(用户现已输入信息){
//呈现弹窗提示保存表单,或许主动后台为其保存

}else{
next(true);//用户脱离
}

请参阅vue文档大局钩子和组件钩子

2,路由懒加载写法:

// 我所选用的办法,个人感觉比较简练一些,少了一步引进荷兹hez赋值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引进组件
]
})
// Vue路由文档的写法:
const app = () => import('./app.vue') // 引进组件
const router = new VueRoute愿望国度r({
routes: [
{ path: '/app', component: app }
]
})
//前端全栈学习沟通圈:866109386
//面向1-3经历年前端开发人员
//协助打破技能瓶颈,提高思维能力

3,路由的项目发动页和404页面

一般项目殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网都会设置这个,假如默许进入地址会跳到login页面,假如你输入的是一个没有用的路由或许殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网是空路由会跳转到notFind页面(你自己设置的404页面)

export default new Router({
routes: [
{
path: '/', // 项目发动页
rfoursomeedirect:'/login' // 重定向到下方声明的路由
},
{
卢本盒微博path: '*', // 404 页面
component: () => imp查大叫是什么意思ort('./notFind') // 或许运用component也能够的
},
]
})

4,setInterval路由跳转持续运转并没有毁掉问题

beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就能够像下面这么暂停。
clearI爱草nterval(this.inter祖祖阿姨valid);
},

beforeDestroy办法是生命周期里组件毁掉前履行的钩子函数,在脱离的时分会触发这个办法,这个办法在其他的当地也会有妙用,期望咱们能够去了解殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网一下。

5,setTimeout/setInterval this指向改动,无法用this拜访VUe实例

这个当地咱们的默许办法肯定是:

//运用变量拜访this实殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网例
let self=this;
setTimeout(function () {
console.log(self);//运用self变上海神明电机有限公司量拜访this实例
},1000);

其实这个当地咱们能够用箭头函数,由于箭头函数会改动this的指向,而指向的刚好是自己的父级this,所以咱们能够这样用:

//箭头函数拜访this实例 由于箭头东港牛老三函数自身没有绑定this
setTimeout(() => {
console.log(this);
}, 500);

这样咱们的this便是指向咱们的vue实例了。

6,Vuqq宠物奇特之旅e 数组/目标更新 视图不更新

办法一:直接运用最爱新觉罗贝简略也是最有用的办法,深复制目标或许数组,视图会进行更新,不过会有一个缺陷,深复制后的数败气症组或许目标不是本来的那个数组或许目标,是你现在改动了之后的值。

上代码:

你的目标或许数组=JSON.parse(JSON.stringify(你的目标或许数组))

先进行转字符串,再转回目标,这个就进行了一个复制的进程,会触发视图的改炮火小分队变,一起也进行了一个数组的替换,有利有弊。

办法二:this.$set(你要改动的数组/目标,你要改动的方位/key,你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改动数组
this.$set(this.obj, "c", "OBKoro1"); // 改动目标

这个是vue专门为改动不了数组设定的一个办法,运用也很简略(假如仍是不明白请参阅vue文档)

7,深度watch与watch当即触发回调

watch很多人都在bow泰星用,可是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选重案追凶by百炼成猫项:deep

在选项参数中指定 deep: true,能够监听目标中特点的改变。

选项:immediate

在选项参数中指定 immediate: true, 将当即以表达式的当时值触发回调,也便是默许触发一次。

watch: {
obj: {
handler(val, oldVal) {
console.log('特点发生改变触发这个回调',val, oldVal)李米奇;
},
deep: true // 监听这个目标中的每一个特点改变
},
step: { // 特点
//watch
handler(val, old殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网Val) {
console.log("默许触发一次", val, oldVa殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网l);
},
immediate: t殷秀梅,同享:vue运用技巧和项目中遇到的问题,黄页88网rue // 默许淫秽扮演触发一次
},
},

点击展开全文

上一篇:

下一篇:

相关推荐