如何通过Vue动态修改obj对象的属性，构建一个长尾？

本文共计1073个文字，预计阅读时间需要5分钟。

目录- 修改data中的obj数据属性- 实现数据响应式- 如何保证Vue能监听到变化- 初始值未设置时Vue是否能监听- 修改data中的obj数据属性的示例

修改data中的obj数据属性的示例：javascriptvar obj=this.o;

目录

• 修改data中的obj数据的属性
• 修改data以实现数据响应式
• 怎么保证你的变化我Vue能监听到？
• 如果初始值没给这个变量Vue还能监听吗？

修改data中的obj数据的属性

//方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj;

//方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性; //part3,修改值；

修改data以实现数据响应式

Vue为了实现在数据变化时对页面重新渲染。所以在初始化时对传进来来的数据对象进行监听。

怎么保证你的变化我Vue能监听到？

监听的操作就是：对数据对象的每一个数据，内部内部声明一个变量，存储这个传进来的初始值，然后开始了代理模式。后续对这个数据的读取和修改，实际都是对这个内部变量的getter和setter。由此所有的修改都会经过setter，那么只需要setter的时候触发监听函数，渲染页面即可。