vue使用技巧
Vue 技巧 使用
2023-09-27 14:28:57 时间
这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码)
https://www.tuicool.com/articles/UNJVryR
1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。)
//在路由组件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
if(用户已经输入信息){
//出现弹窗提醒保存表单,或者自动后台为其保存
}else{
next(true);//用户离开
}
请参考vue文档全局钩子和组件钩子
2,路由懒加载写法:
// 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入组件
]
})
// Vue路由文档的写法:
const app = () => import('./app.vue') // 引入组件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
3,路由的项目启动页和404页面
一般项目都会设置这个,如果默认进入地址会跳到login页面,如果你输入的是一个没有用的路由或者是空路由会跳转到notFind页面(你自己设置的404页面)
export default new Router({
routes: [
{
path: '/', // 项目启动页
redirect:'/login' // 重定向到下方声明的路由
},
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
4,setInterval路由跳转继续运行并没有销毁问题
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么暂停。
clearInterval(this.intervalid);
},
beforeDestroy方法是生命周期里组件销毁前执行的钩子函数,在离开的时候会触发这个方法,这个方法在其他的地方也会有妙用,希望大家可以去了解一下。
5,setTimeout/setInterval this指向改变,无法用this访问VUe实例
这个地方大家的默认方法肯定是:
//使用变量访问this实例
let self=this;
setTimeout(function () {
console.log(self);//使用self变量访问this实例
},1000);
其实这个地方我们可以用箭头函数,因为箭头函数会改变this的指向,而指向的刚好是自己的父级this,所以我们可以这样用:
//箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(() => {
console.log(this);
}, 500);
这样我们的this就是指向我们的vue实例了。
6,Vue 数组/对象更新 视图不更新
方法一:直接使用最简单也是最有效的方法,深拷贝对象或者数组,视图会进行更新,不过会有一个缺点,深拷贝后的数组或者对象不是原来的那个数组或者对象,是你现在改变了之后的值。
上代码:
你的对象或者数组=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很多人都在用,但是这watch中的这两个选项 deep
、 immediate
,或许不是很多人都知道,我猜。
选项:deep
在选项参数中指定 deep: true
,可以监听对象中属性的变化。
选项:immediate
在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是默认触发一次。
watch: {
obj: {
handler(val, oldVal) {
console.log('属性发生变化触发这个回调',val, oldVal);
},
deep: true // 监听这个对象中的每一个属性变化
},
step: { // 属性
//watch
handler(val, oldVal) {
console.log("默认触发一次", val, oldVal);
},
immediate: true // 默认触发一次
},
},
相关文章
- 41 Vue使用第三方动画库
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果,类似左侧菜单与右侧轮播图连接在一起的效果(当鼠标移入菜单时,侧边出现子菜单列表)常见于商城系统,示例代码注释详细开箱即用!
- Vue - Redirected when going from “/login?redirect=%2Fdashboard“ to “/dashboard“ via a navigation
- Vue 3的高颜值UI组件库
- Vue 配置多页面,去掉.html后缀的技巧
- Web前端-Vue.js必备框架(四)
- Vue 中使用图片查看器 v-viewer
- vue引入导航守卫报错error: 'to' is defined but never used (no-unused-vars)
- vue的地图插件amap
- Idea使用技巧14--idea安装vue插件
- vue实现点击修改文字
- vue中$refs、$emit、$on的使用场景
- Vue3实践指南:Prettier代码格式化工具、格式化Vue出现单引号变双引号及分号问题、useRouter执行后undefined问题、Property 'value' does not exist on type 'HTMLElement'、error Unexpected mutation of “xxxx“ prop
- 原有vue项目接入typescript
- flask+vue学习:关于如何处理列表所需的数据
- 初学者对Vue中computed计算属性的理解
- Vue学习第27天——路由vue-router的详解及案例练习
- vue-route开发注意事项
- vue跨界域名报错,后台解决方法(未实测,仅供参考)
- vue-cli配置多入口多出口,实现一个项目两个访问地址,区分不同上线环境