VUE开发实战BUG收集集锦（持续更新。。。）
1:can't not find 'xxModule' - 找不到某些依赖或者模块
这种情况一般报错信息可以看到是哪个包抛出的信息.
一般卸载这个模块,安装重新安装下即可.
2:给组件内的原生控件添加事件不生效
<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i> <span>pw_item.menuName</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!--> <!--究其原因,少了一个修饰符 .native--> <router-link :to="item.menuUrl" @click.native="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i> <span>pw_item.menuName</span> </router-link>
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->
3:Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素.
可以用v-if和v-else-if指令来控制其他元素达到并存的状态
换个直白的解释,就是有一个唯一的父类,包裹者;
比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!!!!
4:我需要遍历的数组值更新了,值也赋值了,为什么视图不更新!!!
那是因为有局限性,官方文档也说的很清楚,只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新);
一般我们更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);
传送门:数组更新检测(触发视图更新)
5:Uncaught ReferenceError: xxx is not define
实例内的 data 对应的变量没有声明，你导入模块报这个错误,那绝逼是导出没写好
6:CSSbackground引入图片打包后,访问路径错误 因为打包后图片是在根目录下,你用相对路径肯定报错啊.... axios默认是 json 格式提交,确认后台是否做了对应的支持; 这种问题一般就是组件内的 props 类型已经设置了接受的范围类型, 我知道其中一种情况会报这种情况,就是你引入的 js,是直接引入压缩版本后的 js(xxx.min.js); 编译错误,对应的依赖没找到!!! 若是一个你已经安装的大模块(比如 axios)里面的子模块(依赖包)出了问题,卸载重装整个大模块.因为你补全不一定有用! 可以使用v-text 指令插入内容但是这样会覆盖原有标签的内容； 也可以在固定标签上添加自定子样式 v-cloak，这样可以解决闪屏问题也可以在标签内插入自己需要的内容不会被覆盖例： 如果时json发生了变化，页面不渲染
7: axios的 post 请求后台接受不到!
你可以魔改 webpack 的配置文件里面的static为./static...但是不建议
你若是把图片什么丢到assets目录下,然后相对路径,打包后是正常的
8:Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.
若是只能接受传统的表单序列化,就需要自己写一个转义的方法...
当然还有一个更加省事的方案,装一个小模块qs
npm install qs -S // 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的. // 具体可以看看我 axios 封装那篇文章 //POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use( config => { // 在发送请求之前做某件事 if (
config.method === "post"
) { // 序列化
config.data = qs.stringify(config.data); // ***** 这里转义
} // 若是有做鉴权token , 就给头部带上token if (localStorage.token) {
config.headers.Authorization = localStorage.token;
} return config;
},
error => {
Message({ // 饿了么的消息弹窗组件,类似toast
showClose: true, message: error, type: "error.data.error.message"
}); return Promise.reject(error.data.error.message);
}
);
9: ERROR in static/js/xxxxxxx.js from UglifyJs
10：Failed to compile with x errors : This dependency was not found !
然后 webpack 内又启用了 UglifyJs(压缩 JS的), 二重压缩大多都会报错!!
解决方案:引入标准未压缩的 JS
解决如下:知道缺少对应的模块,直接装进去
vue中的props是单向绑定的，父组件的属性变化时会传递给子组件，子组件内部不应改变props的值，否则控制台会给出警告。
但如果props的类型为数组或者对象时，在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用，vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值，可以将属性定义为数组或者对象类型传入。
但官方不建议在子组件内改变父组件的值，因为这违反了vue中props单向绑定的思想。
2. 给对象赋值
由1可以引申出，地址引用类型的数据，例如对象obj ={a:1},如果想要修改obj中的a属性，通过obj.a = 2这样赋值，页面不会更新，需使用vue.set方法更改才会起作用， Vue.set(this,obj,a,2);
同样，如果要给obj增加一个新属性，如果该属性未在data中声明，页面也不会刷新。也就是vue文档中声明的“Vue 不能检测到对象属性的添加或删除”，同样需要使用vue.set方法进行赋值才好使。
3. 深拷贝数组或对象
对象或数组的简单赋值，修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。
对于对象，可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。
对于数组，可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。
4. 给组件增加独有样式
vue中每一个组件都可以自定各自的css样式，如果希望组件内的样式只对当前组件起作用，可以在style标签中增加scoped即可。
该写法会让vue在渲染组件的时候给每个元素都增加一个data-v-/版本号/的属性，可以保证只针对有同样data-v-data-v-/版本号/的元素应用该样式。
5. v-for循环key属性
vue中的v-for循环最好加上key属性，否则在高版本(2.2.0+)的vue中控制台会报错。
key属性需要唯一，理想的 key 值是每项都有唯一 id，全局不需唯一，但在一个循环中需要唯一。
6. 引用图片
图片引用问题。直接把本地图片地址放在src里没问题。但如果把地址提取出来写在data里或者通过method动态给src赋值则引用不到。
因为放在template模板里会被webpack打包所以可以，而放在data或者动态赋值，图片路径只是一个字符串webpack不会处理所以引用不到。
解决办法：通过import或者required引入。import src from ‘../../img.png’或者data:{img:require(‘../../img.png’)}
7. 父组件传值
在子组件使用父组件传入的值时，最好复制出一份props的值，通过data或者computed进行赋值。
data赋值与computed赋值的区别：
data赋值：data:{return {aaa: this.aaa}如果是在data中进行赋值，当父组件的aaa值发生改变时，不会在重新赋给子组件中的aaa。
computed赋值：如果想让子组件跟着父组件修改，需要将赋值操作写在computed中。computed:{aaa(){return this.aaa}
8. 对象数组深度监听
后端传过来的数组是一个数组对象，页面中绑定对象中某一具体的属性，当该值变化时调用某个函数，自然想到就是watch方法。但如何watch数组对象中某一个具体的属性，显然不可能一个个属性写watch。
解决办法：
1.watch整个对象，设置deep为true，当该对象发生改变时，调用处理函数。
2.将页面中绑定的属性写在computed函数中，watch这个computed中的函数，当对象值改变时会进入computed函数中，进而进入watch函数中，再调用处理函数。
9. 动态增加class
给元素动态增加class时，可以在模板中通过:class={‘hasClass’: ifHasClass}来实现，当ifHasClass为true时，该元素会自动加上hasClass的样式。
动态绑定的class可以与正常写的一起使用<a class=‘aaa’ :class={‘bbb’:isBbb}></a>，但如果在一个元素中使用了两个class则会报错<a class="aaa" class="bbb"></a>。
10. 本地开发跨域问题
在本地开发请求后端服务器接口的时候，都不可避免的会遇到跨域的问题。解决方法可以通过加一个node中间层或者nginx做反向代理。但是如果是用vue-cli搭建的项目，vue-cli在config中自带了一个proxyTable属性，可以配置这个属性解决跨域的问题。module.exports = { // ... dev: { proxyTable: { '/api': { // 遇到/api的接口都会走此代理,因此在调用接口时，需要在url中增加/api标识 changeOrigin: true, // 是否启用跨域 pathRewrite: { '^/api': '' // 将接口中的/api替换成'' } } } }}1.页面闪屏问题。当网速比较慢的时候，如果使用的{{}}插入的内容时，会在卡顿的页面出现{{}}及其源码。
解决方法：
[v-cloak] {
display: none;
}<p v-cloak>{{ mes }}+++++</p>2.如果在组件上定义的事件绑定不上可以使用.native解决
3.watch在深度监听时卡顿，需要将复杂数据类型转化为简单类型，进行浅监听。
4.如果出现数组变了，页面没有重新渲染的问题，可以采用以下方法解决：
//1.this.goods.splice("下标",1,“新值”)this.goods.splice(index,1,obj)//2.vm.$set(数组，下标，新值)this.$set(this.goods,index,obj)//3. Vue.set(数组，下标，新值)Vue.set(this.goods,index,obj)//vm.$set(obj,key,value)this.$set(this.json,"y",30)
Vue.set(this.json,"y",40)
评论