改变vue实例中的数据却不会导致视图更新的情况

1、利用对象的索引给对象添加键值对

点击插入按钮,结果页面并没有显示age值,但在控制台输出stu数组发现age已经添加进去【因为通过索引对对象添加或修改值是不会触发setter方法的,即使数据被修改了,vue也不知道】:

显示结果
控制台输出结果

2、改变数组的长度

点击缩小数组长度按钮后:

页面数据显示
控制台输出实际数据

3、vue无法检测对象内键值对的添加删除,所以可以利用Object.assign方法通过创建一个新的对象让它包含原对象的属性和新的属性,然后再赋值给vue中的数组,从而达到响应化的目的。

更改前的页面
更改后的页面
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。