深入Vue响应式原理, 解决Vue表单文本框/选择框无法输入问题

需求引入

一般来说网页中都会存在Form表单以供填写, 常用的编辑页面会从后台获取到数据并赋值到文本框中, 并会对文本框进行数据的绑定, 然后通过某个方法去给文本框进行赋值, 如下图所示, 这样经常会导致文本框无法修改数据和下拉框选择无效的情况, 这篇文章将就是为了解决这个问题.

导致原因

引入Vue官方链接: https://cn.vuejs.org/v2/guide/reactivity.html
官方原文: Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

个人理解: 这里我们涉及到的就是上文中提到的对象, Vue 无法检测对象 property 的添加或移除, 如果property是直接在data中存在的那么是可以正常响应的, 如果是一个对象的property, 那么Vue其实是无法做出正常响应的 或者是后续才有的property, 压根就没定义, 而是后面才定义并赋的值.
正常响应:

非正常响应:

非正常响应:

其实很明了了, 想要响应式, 必须要直接在data中优先定义好, 且定义的类型必须不是对象、数组.

问题解决方式

普通变量在我自己参与的项目中其实用到的并不多, 更多的是对象, 下图所示, 直接不赋任何字段值, 后续在api方法中自动赋值.

这样直接赋值是无法做到页面数据响应的, 也就是上面说到的输入框无法修改赋值好的值, 下拉框无法选择初始化之外的值.
解决方式一: 网上很多人说使用forceUpdate进行强制更新, 这样的话必须每个input都加上这么个东西, 非常的繁琐, 也并非官方推荐的方式.

解决方式二: 方式二也是我个人较为推荐的使用方式. 使用Vue官方推荐的, Object.assign() 或 _.extend()方法
Object.assign(): 方法用于将所有可枚举属性的值从一个或多个源对象source复制到目标对象。它将返回目标对象target
该方法的浅拷贝特性, 可以助我们修改 / 增加原属性的值.
1. data中定义了空对象form

2. 赋了各种类型的值后, 通过assign方法影响原属性使其变为响应

经过这样处理后表单中的全部控件均是响应式.