对象属性 vue 变化

在前端开发中，一个对象包含了很多属性，Vue框架作为前端发展中的佼佼者，它将对象属性的变化变得更加便捷。

var obj = {
    name: 'Tom',age: 18,sex: 'male',} 

在Vue中，当我们将对象赋值给Vue组件data选项中的属性时，Vue会将这个对象所有的属性都转化为响应式数据。这里我们将上面的obj对象赋值给Vue组件：

var app = new Vue({
    el: '#app',data: {
        obj: obj
    }
}) 

当我们修改obj对象的属性时，Vue会自动监测到属性的变化并作出相应的更新：

obj.name = 'Lucy' 

此时Vue会自动更新组件中的对应数据。

但是，当我们添加或删除对象的属性时，Vue并不会自动将其转化为响应式数据：

obj.address = 'Beijing'
delete obj.sex 

这时，我们需要使用Vue提供的$set/$delete方法来实现：

Vue.set(obj,'address','Beijing')
Vue.delete(obj,'sex') 

$set方法可以添加属性并使其成为响应式数据，$delete方法可以删除属性并取消响应式相关。

另外，当我们需要修改多层嵌套对象的属性时，我们需要使用Vue.set/$set方法，如下面的例子：

var obj = {
    name: 'Tom',address: {
        city: 'Beijing',street: 'Xicheng District'
    }
}
Vue.set(obj.address,'city','Shanghai') 

当我们需要监听对象属性的变化时，我们可以使用Vue提供的$watch方法：

app.$watch('obj.name',function(newValue,oldValue){
    console.log('Name changed from ' + oldValue + ' to ' + newValue)
}) 

这里我们监听了obj对象的name属性，并在属性变化时打印输出。

最后，需要注意，在Vue中不能直接改变数组中某一项的值，这是因为Vue并不支持对数组某一项的监听，而是支持对整个数组的监听。当我们需要改变数组中某一项时，应该使用Vue提供的$set方法或者数组的原生方法。

在使用Vue时，我们需要注意到以上内容，这将会使我们更加便捷地处理对象属性的变化。