Vue 项目中常遇到的问题

刷新页面，传的参数类型变了

问题描述

vue-router通过query传参，比如：?fromWork=true&extraType=1,传过去的fromWork是boolean型，extraType是number型，但是当刷新页面时，拿到的参数都变成了字符串。

解决方式

• 拿到参数后进行类型转换

• 用boolean型用0/1代替，如果需要number型，则在页面转换

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)
}

页面合并时，各个组件样式冲突

问题描述

比如两个组件都设有background-color，一个为red，另一个为green，都在App页面中引入使用了。页面渲染时会发生合并，样式冲突。后引入的组件样式会覆盖先引入的组件样式。

解决方式

• 在css中引入scoped