VUE的错误日志

1、父子传值时子组件使用props中的值时

• mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isShare"； 意思就是：直接改变一个道具，因为当父组件重新呈现时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具突变:“isShare”

• 解决方法：在子组件中使用一个本地的参数值接收传递的值

2、页面使用背景图时无法显示

• 解决方法：首先在data中require引入,然后在img的src处使用绑定属性绑定图片地址

data中定义 imgsrc: require("../../assets/1.jpg")

图片引入 <div :style="{backgroundImage:'url('+ imgsrc+')'}></div>"

3、父子传值时子组件接收的对象

• Property or method "formBanks" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. ---- > 属性或方法“formBanks”不是在实例上定义的，而是在呈现期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是对于基于类的组件。

• 解决方案：定义本地属性，将接受的值交给本地属性

4、父组件传递给子组件对象，在子组件中修改后会同步到父组件

• 此问题的出现是因为在子组件中，即使将父组件向子组件传递的对象赋值给本地，也会因为对象与基本数据类型的保存位置的区别（堆区和栈区），本地数据只接收堆区的地址，在子组件中修改时，会影响到所有引用这个地址的对象。
• 解决方法：
  • 1、不给子组件传递对象，传递基本数据类型的值
  • 2、使用深拷贝
    • 使用 JSON.parse(JSON.stringify(xxx))来转换一下数据（不能处理函数），再将其赋值给另一个值。

注意：在很多时候，我们经常去拿取一些表格之中的值，并进行修改，那么在拿取 堆区 的数据时，我们就需要深拷贝一下数据，防止在修改过程中污染到表格的值

5、element-ui的下拉框有值却无法选中

• 问题：在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙）

• 解决方法：

  • 这个问题的出现是因为下拉框数据是循环接口请求的数据，因为数据层次太多，render函数没有自动更新，需手动强制刷新，vue.$forceUpdate()就是重新render。写一个方法，在select的change事件中调用此方法，运用 this.$forceUpdate()强制刷新，页面即可正常选值。

  change(){ this.$forceUpdate() }

• 扩展：同理，forceUpdate()这个方法也适用一些很深的组件 state 已经改变了的时候，可以在该组件上面调用，解决页面v-for中修改item属性值后页面页面值不改变的问题。

6、下拉框选值时，发现旧值和新值的选项都被选中

• 问题：下拉框值为多个对象，我需要拿取对象中的id,显示的是对应的label,但在选值后，发现旧值和新值的选项都是被选中的状态
• 解决方法：这是一个由数据浅拷贝引发的bug。只需要把浅拷贝换成深拷贝即可，这里我们直接用JSON.parse()和JSON.stringify()深拷贝一下，就不会相互干扰了。