Vue.js踩雷篇

问题出现：一个表格，长度不固定，采用的element组件；当点击第二列中的某个下拉选项时，data已经被改变，但页面无反应。

初步排查以为监听没监控到数据的变化，后加上监听，使用$set()方法改变属性值，无效果。

进一步排查，发现数据初始化时，model里只有一条数据，刚开始以为jQuery.extend() 方法和$set()一样，都是增加属性值，然而两者并不相同。

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

vue实例创建之后添加新的属性到实例上，它不会触发视图更新。这就是为什么添加新的属性，页面无反应。

使用$set()方法在初始化时，既可以新增属性,又可以触发视图更新。问题解决。

总结：多学习前端知识，避免踩坑。