如何领会vue对象的响应式和数组的响应式

这篇文章给大家分享的是“如何理解vue对象的响应式和数组的响应式”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

vue2.0 响应式

1. 对象的响应式

1.1 Object.defineProperty

Object.defineProperty(obj, prop, descriptor)方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

obj——要定义属性的对象

prop——要定义或修改的属性的名称或Symbol

descriptor——对象，要定义或修改的属性描述符

// descriptor{

value: undefined, // 属性的值

get: undefined, // 获取属性值时触发的方法

set: undefined, // 设置属性值时触发的方法

writable: false, // 属性值是否可修改，false不可改

enumerable: false, // 属性是否可以用for...in 和 Object.keys()枚举

configurable: false // 该属性是否可以用delete删除，false不可删除，为false时也不能再修改该参数}

通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for…in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认的额外选项（或配置）。

而默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。

示例：

const a = {b : 1}

console.log(Object.getOwnPropertyDescriptor(a, 'b'))

// {value: 1, writable: true, enumerable: true, configurable: true}

Object.defineProperty(a, 'c', {value: '2'})

console.log(Object.getOwnPropertyDescriptor(a, 'c'))

// {value: '2', writable: false, enumerable: false, configurable: false}

a.c = 3

console.log(a.c)

// 2

Object.defineProperty(a, 'c', {value: '4'})

console.log(a.c)

// error: Uncaught TypeError: Cannot redefine property: c

1.2 set和get

// 模拟vue响应式过程const app = document.getElementById('app')const data = {

a: {

b: {

c: 1

}

}}function render () {

const virtualDom = `这是我的内容${data.a.b.c}`

app.innerHTML = virtualDom}function observer (obj) {

let value for (const key in obj) { // 递归设置set和get

value = obj[key]

if (typeof value === 'object'){

arguments.callee(value)

} else {

Object.defineProperty(obj, key, {

get: function(){

return value },

set: function(newValue){

value = newValue render()

}

})

}

}}render()observer(data)setTimeout(() => {

data.a.b.c = 22}, 2000)setTimeout(() => {

data.a.b.c = 88}, 5000)

上述方法实现了数据的响应，但存在很大的问题，我们触发一次set，就需要整个页面重新渲染，然而这个值可能只在某一个组件中使用了。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!