前言
本文章旨在解决新手在上手 Vue 的一些简单问题，本质上此问题是自己使用以及对 Vue 的理解不够好。也欢迎评论指出本文尚未能提及知识点以及文章错误点。那么，咱们开始吧！
仔细阅读官方文档（Vue、Element）,其实可以规避掉大部分问题。
视图未及时更新
问题：
在你进行数据变动之后，你会发现页面上的视图并没有进行相应的改变，在控制台你会发现数据其实是进行变动了。
原因：
对数组以及对象进行了直接操作。Vue 无法监听到改变。在对数组以及对象进行处理时，需要单独操作。
因为 Vue2.x 进行监听的原理实际上是使用的 Object.defineproperty给属性设置 getter 和 setter，若是直接往对象以及数组加属性是无法添加getter 和 setter（可以这样理解，默认 data 中的对象里的所有属性都会被上getter 和 setter，但是你自己突然加一个是无法被加上的，当然这是出于性能方面的考虑）。Vue 对数组方法进行了重写，所有我们在操作数组的时候尽可能去使用数组方法。而对象我们一般多使用深拷贝来对地址进行改变，从来使其更新。
- 数组
- 将其指向一个全新的数组
- 使用数组方法进行操作。例如：slice、splice...
- 使用$set
- 对象
- 将其指向一个全新的对象
- 使用深拷贝方法：Object.assign（请注意这是个浅层深拷贝、多层会无效）、JSON.parse。
- 使用$set
数据被突然改动
问题：
在你进行数据变动之后，你会发现页面上没有操作的地方数据居然也跟着相应改变了。
原因：
- 第一点我们首先要排除掉是否有逻辑问题（粗心方面的问题）
- 最大的可能是：父子通信时，随意地进行修改 props 里面数据。一般情况下，我们去修改 props 数据的地址，Vue 会报一个错误的，但是如果这个数据是一个对象时，我们去修改里面的属性，那么 Vue 就不会进行报错了（因为没有修改地址）。当然排除掉你这故意这么做（一般除开我们设计组件的场景，这种写法都是不正确的）。
我们想要去修改 props 里面的数据时，最好对数据进行一个深拷贝，数组推荐使用 slice，对象推荐使用 Object.assign。
更新老是被反复触发
问题：
在你进行数据变动之后，你可能会发现更新触发了很多次。
原因：
- 还是首先我们排除自己代码中的问题，是否有不正确的递归或者写法。
- 检查下不同代的组件是否有重复的事件。
- 检查下计算属性中写法是否合规，计算属性方法，只要其中的 data 方法进行了更新，那么这个计算属性的方法就会发现相应的更新。一般计算属性中，我们只会算出一个结果即可，最好不要在其中写入过多需要操作 data 的逻辑。
Element 中表单无法输入
问题：
在 Element 表单重置后，发现表单无法进行输入了。
原因：
Element 表单是需要进行数据初始化（就是需要在 mode 对应的 form 中写入对应属性的初始值）的，若是没有，是无法调用表单初始化方法的（resetField）。值得注意的是：初始化并非是只能在 data 中定义好，只要我们在 created 声明周期函数中，进行了对 form 值得设置，这一步操作其实也算初始化。
那么，我不初始化，是否也能清空表单呢？答案是可以的，有时候我们表单查询时里面的项过多，初始化是比较麻烦的事。我们可以将resetField替换为 表单对应的 表单对象（mode 对应的 form）设置为空对象即可（有校验的表单不可以这么做，因为无法对校验清空，而且这种情况，你去调单独清除校验的函数也不好使）。
Element 中表单校验校验总是不对
问题：
页面中校验未生效，校验不能清除
原因：
- 校验未生效，这一点其实还是看文档不够仔细。我们首先设置表单对应的 model（记得初始化），然后设置 rules，而在表单项中，我们需要设置 prop，并且必须和表单项里的值进行对应。如图所示：
- 校验不能清除请查看上一条做法（没有对表单进行初始化）。
推荐浏览器工具
Fehelper：里面有JSON 美化、对比，时间戳转换，正则表达式，取色器，页面性能检测等常用工具。
Vue Devtools：不多说，Vue 开发必备（可以查看组件相应的 data 值以及 Vuex 里面的数据等等）。
