Vue 项目中常遇到的问题
刷新页面,传的参数类型变了
问题描述
vue-router
通过query
传参,比如:?fromWork=true&extraType=1
,传过去的fromWork
是boolean
型,extraType
是number
型,但是当刷新页面时,拿到的参数都变成了字符串。
解决方式
拿到参数后进行类型转换
用boolean型用
0/1
代替,如果需要number
型,则在页面转换
页面合并时,各个组件样式冲突
问题描述
比如两个组件都设有background-color
,一个为red
,另一个为green
,都在App页面中引入使用了。页面渲染时会发生合并,样式冲突。后引入的组件样式会覆盖先引入的组件样式。
解决方式
在
css
中引入scoped
v-if 与 v-for 同时使用会报错
问题描述
在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。
提示错误:The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'
v-for 的优先级比 v-if 的高,所以每次渲染时都会先循环再进条件判断,而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的,所以如果将 v-if 和 v-for一起使用时会特别消耗性能,如果有语法检查,则会报语法的错误。
解决方式
将 v-for 放在外层嵌套 template (页面渲染不生成 DOM节点) ,然后在内部进行 v-if 判断
<template v-for="Oitem in Object.keys(cItem)">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
:key="Oitem" // 注意点:key值写在包裹的元素中
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
</template>
如果条件出现在循环内部,不得不放在一起,可通过计算属性computed 提前过滤掉那些不需要显示的项
key属性值要唯一,且不是index
问题描述
vue中使用 v-if
和v-for
要加上key属性,否则在高版本的vue中控制台会报错。这个Key是一个唯一值,不能是index。key一般应用在v-if
和v-for
中更新渲染时,它们都是默认“就地复用” 的策略。
解决方案
使用index 作为 key和没写基本上没区别,因为不管数组的顺序怎么颠倒,index 都是 0, 1, 2...这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。
需要深拷贝数组或对象
问题描述
对象或数组的简单赋值,修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。
解决方案
对于对象,可以通过
newObj = JSON.parse(JSON.stringfy(obj))
实现。对于数组,可以通过
newArr = […arr]
或者newArr = arr.slice(0)
来实现。
vue 2.0 修改对象属性
问题描述
在vue 2.0 中,由于Object.defineproperty() 的弊端,给对象新增属性,删除属性,或者对象属性又是一个对象的时候,无法被监听到,页面不会被更新。
解决方案
vue 3.0 中使用Proxy 解决了这个问题。
使用Vue.$set() 进行修改。
对数组对象,进行深度监听
问题描述
后端传过来的数组每一项都是对象,当对象的属性变化时调用某个函数,自然想到就是watch
方法。但如何watch
数组对象中某一个具体的属性,显然不可能一个个属性写watch
。
解决方案
watch
整个数组,设置deep
为true
,当该对象发生改变时,调用处理函数。将页面中绑定的属性写在
computed
函数中,watch
这个computed
中的函数,当对象值改变时会进入computed
函数中,进而进入watch
函数中,再调用处理函数。
样式切换时,动态增加class
问题描述
当样式需要切换的时候,尽量不要写两个 v-if
或 v-show
来切换样式。v-show 不是惰性的,在没有必要的时候,还是插入在DOM中;然后v-if 又有一个明显的创建和删除过程。可以通过动态添加class
的方法切换样式。
解决方案
给元素动态增加class
时,可以在模板中通过:class={‘hasClass’: ifHasClass}
来实现,当ifHasClass
为true
时,该元素会自动加上hasClass
的样式。 如果在一个元素中使用了两个class
则会报错,动态绑定的class
可以与正常写的一起使用。
父子组件通信,props单向绑定
问题描述
vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。虽然当 props的类型为数组或者对象时,在子组件内部改变props的值 vue 检测不到。但官方不建议在子组件内改变父组件的值,因为这违反了vue中props单向绑定的思想。
解决方案
eventBus
事件总线适用于父子组件、非父子组件等之间的通信。依赖注入(provide / inject)用于父子组件、祖孙组件之间的通信。
provide(发送) / inject(接收)
是Vue提供的两个钩子,和data
、methods
是同级的。
vue中函数的this指向问题
问题描述
箭头函数中的this指向定义后就固定不变; 普通函数中的this指向是变谁调用的指向谁。
created () {
// 箭头函数中this指向vue
setInterval(() => { console.log(this) }, 1000)
// 普通函数中this指向window,因为setInterval()函数是window对象的函数
setInteval(function () { console.log(this) }, 1000)
}
解决方案
如果要使用普通函数,要使用了一个变量来当中间值
function(){
let temp = this;
setInvertal(function(){....}, 1000)
}
Vue 项目中常遇到的问题的更多相关文章
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
随机推荐
- JVM学习——垃圾回收GC(学习过程)
JVM学习-垃圾回收(GC) 2020年02月19日06:03:56,开始学习垃圾回收,学习资料来源(张龙老师的JVM课程) JVM内存数据区域知识复习 学习垃圾回收之前,要对JVM内部的内存区域有详 ...
- springboot整合mybatisplus使用记录
1. springboot项目基本配置 springboot基本pom依赖 <parent> <groupId>org.springframework.boot</gro ...
- python中函数isinstance()用来判断某个实例是否属于某个类
1 print(isinstance(1,int)) # 运行结果 True 2 # 判断1是否为整数类的实例 3 print(isinstance(1,str)) # 运行结果 False4 # 判 ...
- 『德不孤』Pytest框架 — 7、Pytest预期失败
目录 1.@pytest.mark.xfail()标记的作用 2.应用场景 3.语法参数说明 4.示例 5.忽略xfail标识 Pytest预期失败需要使用@pytest.mark.xfail()标记 ...
- NET命令入侵实例
实验目的 了解NET入侵的过程 掌握NET命令的使用方法和它的参数搭配 实验内容 NET命令的使用方法和它的参数搭配 实验环境描述 XP作为客户端,Windows server 2003作为远程服务器 ...
- 数据分析工具那么多,掌握Smartbi这一个就够了!
经常听见有人问,数据分析用什么工具好? 被大家熟知的数据分析工具有很多,比如Excel.BI.R.Python--具体选择哪个这要看个人的需求,如果非要说哪个好,其中BI工具小编觉得"老少皆 ...
- 常用邮箱POP3和SMTP服务器 设置
转至:https://blog.csdn.net/zjfei/article/details/4757424?spm=1001.2101.3001.6661.1&utm_medium=dist ...
- Service层抽象规范
Service层是整个web系统的负责业务逻辑一块,最有必要实现抽象,Service层要达到复用性,低耦合性.那么该如何抽象呢?一般遵循以下原则 1.单一职责(SRP) 2.开放-封闭(OCP) 3. ...
- 【译】C# 11 特性的早期预览
原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...
- C++ 删除一个字符串中的指定字符
Q:一个数字是以xxx,yyy,zzz的字符串形式存储的,将逗号消去并转化为整数输出 方法一:char数组,即定义时s1定义为 char s1[20]的形式: //删除输入字符串中的逗号,并构建新串 ...