一、在JS中的响应式原理

1.方法和作用1

它就是基于Object.defineProperty来实现的

  • 语法:Object.defineProperty(对象名,属性名,属性描述符)
  • 作用:为对象添加一个属性,但是添加后不允许再修改
  • 给对象添加单个属性的示例:
// 给user对象 添加 sex属性,属性值 为 male
Object.defineProperty(user,'sex',{
    value:'male', // 属性的默认值
    writable:false, // 是否允许修改该属性,默认为false
    configurable:false, // 是否允许删除该属性,默认为false
    enumerable:true, // 是否允许遍历该属性,默认为false
}); 
  • 给对象添加多个属性的示例:
// 给user对象添加address和height属性,属性值分别为南京和180.5
Object.defineProperties(user, {
    address: {
        value: '南京',
        writable:false, // 是否允许修改该属性,默认为false
        configurable:false, // 是否允许删除该属性,默认为false
        enumerable:true, // 是否允许遍历该属性,默认为false
    },
    height: {
        value: 180.5,
        writable:false, // 是否允许修改该属性,默认为false
        configurable:false, // 是否允许删除该属性,默认为false
        enumerable:true, // 是否允许遍历该属性,默认为false
    },
});

2.方法和作用2(ES6新增)

  • 语法:Object.defineProperty(对象名,属性名,属性描述符)
  • 作用:拦截对某个属性的赋值和取值的操作,这称为数据劫持
  • 对数据进行劫持的示例:
var user = {};
// 给user对象添加name属性,并对name属性进行劫持
Object.defineProperty(user,'name',{
    // 赋值
    set:function(value){ // 参数value为赋值时传入的值
        temp = value.toUpperCase(); // 做额外的处理,进行扩展操作,属性值为大写
    },
    // 取值
    get:function(){
        return temp; //取值一定要返回值,不然为undefined
    }
}); 

// 赋值
user.name = 'zhangsan';
// 取值
console.log(user.name); 
  • 对数据进行劫持的示例2:
<div id="app">
    <h3 id="h3Dom"></h3>
    <input type="text" id="inputDom" oninput="changeValue(this.value)" />
</div>

<script>
var data = {};
var _value = '';
Object.defineProperty(data, 'value', {
    get() {
        return _value;
    },
    set(value) {
        _value = value;
        var h3Dom = document.getElementById('h3Dom');
        h3Dom.textContent = _value;
    },
});

function changeValue(newValue) {
    data.value = newValue;
}
</script>
最后修改:2020 年 08 月 31 日 12 : 19 AM