vue使用技巧及vue项目中遇到的问题
这里给大家分享一下vue中的一些技巧，希望对大家有用处。（话不多说上代码）
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 // 默认触发一次
},
},
总结
以上所述是小编给大家介绍的vue使用技巧及vue项目中遇到的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因
-
Vue项目中最新用到的一些实用小技巧
写在前面 在最近的 Vue 项目中,为了完成需求使用了一些小技巧,做个笔记,或许也能帮到道友. 阅读重点 需求一:为路径配置别名 在开发过程中,我们经常需要引入各种文件,如图片.CSS.JS等,为了避免写很长的相对路径(../),我们可以为不同的目录配置一个别名. 找到 webpack.base.config.js 中的 resolve 配置项,在其 alias 中增加别名,如下: 创建一个 CSS 文件,随便写点样式: .avatar display: flex; justify-conten
-
实用的Vue开发技巧
1 状态共享 随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的Observable API,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况. 如下这个例子,我们将在组件外创建一个store,然后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享
-
详解vuex commit保存数据技巧
vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据改变了,是什么促使他改变的. 数据流向永远都是一个方向,下游是没有权利改变数据的,所以需要数据发放中心同一级的方法来改变数据. 单项数据流,对于react来说,的确是必要的,但对于vue来说,是那么有必要吗? vue采用数据依赖更新,必要的数据都采用Object.defineProperty处理.给
-
vue的传参方式汇总和router使用技巧
vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue
-
vue使用技巧及vue项目中遇到的问题
这里给大家分享一下vue中的一些技巧,希望对大家有用处.(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息.) //在路由组件中: mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单,或者自动后台为其保存 }else{ next(true);//用户离开 } 请参考vue文档全局钩子和组件钩子 2,路由懒加载写法: // 我所采用的方
-
vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod
-
Vue项目中常用的实用技巧汇总
目录 前言 1. 使用 $attrs 和 $listeners 进行多层级的数据和事件传递 2. 实现数据的双向绑定,方便维护数据 使用 .sync 实现 Prop 的"双向绑定" 使用 model 选项 3. 使用 Mixins 4. 使用动态组件去懒加载组件 5. 在组件作用域内的 CSS 中使用 ::v-deep 修改组件样式 6. 使用装饰器优化代码 7. 利用 require.context 去获取项目目录信息 总结 引用 前言 在 Vue 项目开发中,很容易产生一些问题,
-
vue项目中less的一些使用小技巧
目录 前言 一.样式穿透 1. 什么是样式穿透? 2. 如何使用? 二.混入 1. 什么是混入? 2. 如何使用? 三. less自动化导入 1. 自动化导入好处 2. 如何实现? 总结 前言 我们所能看到的美观的网页都是经过UI精心设计后,由前端攻城狮搭建的.网页想要有炫酷的样式,就需要用到css来处理,其中不乏会出现大量重复.冗余的代码,这时,像less.sass.scss等样式预处理器就出现了,极大地精简了css代码,提高了开发效率.今天跟着本文一起看看在vue项目中使用less
-
vue项目中一定会用到的性能优化技巧
目录 引言 性能优化标准 Lighthouse 通用常规优化手段 通用性能优化分析 FCP(First Contentful Paint) LCP(Largest Contentful Paint) SpeedIndex(速度指数) 排查性能瓶颈 分析包内容 利用chorme devtool 的代码覆盖率 针对vue 的特殊优化 图片懒加载 虚拟滚动 vue 中的函数式组件 利用v-show .KeepAlive 复用dom 分批渲染组件 最后 引言 提起性能优化 很多人眼前浮现的面试经验是不是
-
vue.js项目中实用的小技巧汇总
前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery
-
vue项目中使用bpmn为节点添加颜色的方法
内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo
-
vue项目中使用bpmn-自定义platter的示例代码
内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我
-
22个Vue优化技巧(项目实用)
目录 代码优化 v-for 中使用 key v-if/v-else-if/v-else 中使用 key 合理的选择 v-if 和 v-show 使用简单的 计算属性 functional 函数式组件(Vue2) 拆分组件 使用局部变量 使用 KeepAlive 事件的销毁 图片加载 采用合理的数据处理算法 其他 首屏/体积优化 体积优化 代码分割 网络 演示代码使用 Vue3 + ts + Vite 编写,但是也会列出适用于 Vue2 的优化技巧,如果某个优化只适用于 Vue3 或者 Vue2,