Vue中的Object.defineProperty全面理解

目录
  • Object.defineProperty理解
    • 一、直接添加
    • 二、使用getter、setter
  • 需要Object.defineProperty()注意点

Object.defineProperty理解

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

一、直接添加

let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。
    writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。
    configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。  
             
})
console.log(person);

二、使用getter、setter

let age_number = 18;
let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    //value:18,
    //enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。
    //writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。
    //configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。  
    get(){
        console.log("读取age属性");
        return age_number;
    },
    set(value)
    {
        console.log("修改age的值");
        age_number = value;
    }              
})
console.log(person);

需要Object.defineProperty()注意点

1.用Object.defineProperty方法创建一个新属性时，如果不指定configurabel，enumberable，writable特性的默认值都是false，修改已定义的属性特性无限制。

2.Configurable性定义为不可配置就不能把它变回可配置，此时调用Object.defineProperty修改除writable之外的特性都会报错。

3.模拟访问和设置的行为：想要访问器属性模拟默认行为的话，必须的在里面新添一个属性不然会造成循环引用

var obj={
a:1
};
 
Object.defineProperty(obj,"a",{
get:function(){
return this.a;
},
 
set:function(val){
this.a=val
}
});
obj.a;// Maximum call stack size exceeded

会造成循环引用，狂call不止

person.a → get.call(person) → this.a → person.a  → get.call(person) → this.a......

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue源码学习之Object.defineProperty 对数组监听

    上一篇中,我们介绍了一下defineProperty 对对象的监听,这一篇我们看下defineProperty 对数组的监听 数组的变化 先让我们了解下Object.defineProperty()对数组变化的跟踪情况: var a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(

  • Vue Object.defineProperty及ProxyVue实现双向数据绑定

    双向数据绑定无非就是,视图 => 数据,数据 => 视图的更新过程 以下的方案中的实现思路: 定义一个Vue的构造函数并初始化这个函数(myVue.prototype._init) 实现数据层的更新:数据劫持,定义一个 obverse 函数重写data的set和get(myVue.prototype._obsever) 实现视图层的更新:订阅者模式,定义个 Watcher 函数实现对DOM的更新(Watcher) 将数据和视图层进行绑定,解析指令v-bind.v-model.v-click(m

  • vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器. 这么说吧,vue.js是通过它实现双向绑定的.俗称属性拦截器.而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用).可见defineProperty的威力之大. Object.defineProperty()    不支持ie8 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. //

  • vue.js利用Object.defineProperty实现双向绑定

    Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123 很简单,它接受三个参数,而且都是必填的.. 传入参数 第一个参数:目标对象 第二个参数:需要定义的属性或方法的

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    vue用Object.defineProperty手写一个简单的双向绑定的示例

    前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

  • vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数. 在MDN上查看有关Object.defineProperty的解释. 我们先从最简单的开始: let a = {'b': 1}; Object.defineProperty(a, 'b', { enumerable: false, configur

  • 浅谈vue实现数据监听的函数 Object.defineProperty

    浅谈vue实现数据监听的函数 Object.defineProperty

    在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param  obj  要配置属性的某个对象 @param propname

  • Vue中的Object.defineProperty全面理解

    目录 Object.defineProperty理解 一.直接添加 二.使用getter.setter 需要Object.defineProperty()注意点 Object.defineProperty理解 定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象. 一.直接添加 let person = {     name:'张三',     sex:'男', } Object.defineProperty(per

  • Vue中函数防抖节流的理解及应用实现

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

  • Vue中keep-alive组件的深入理解

    前言 最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了. 正文 我们都知道,vue组件进行路由跳转时,会销毁当前组件.所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数.这就导致了上述问题,A路由传到B路由的参数没了. 当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-ali

  • vue中对虚拟dom的理解知识点总结

    vue中对虚拟dom的理解知识点总结

    本质是一个普通的js对象,用于描述视图界面结构的, 在mouted的回调中,可以输出_vnode, 通过图可以知道,_vnode中有以下几个主要的属性: tag:组件的标签名, data: 组件的属性, children: 组件的子标签 parent: 父级元素 render函数: 作用:创建虚拟dom, 每个组件都有虚拟dom,并且虚拟dom都是由render函数创建的: 使用虚拟dom树的目的:提高渲染效率 在vue中,当渲染视图时候会调用render函数.这种渲染不仅发生在组件创建时候,还

  • vue中的Object.freeze() 优化数据方式

    目录 来看他的定义 Object.freeze()存在的意义(应用场景)是什么呢? 举个例子 在看一些他人的例子 冻结对象 冻结数组 freeze翻译成汉语有冻结的意思使用 ,Object.freeze()是ES5新增的特性,可以冻结一个对象,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化. 来看他的定义 Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性.可配置性.可

  • Vue中之nextTick函数源码分析详解

    1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&

  • 详谈Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外的操作,然后返回结果.那么vue中双向数据绑定就是一个典型的应用. Vue2.x 是使用 Object.defindProperty(),来进行对对象的监听的. Vue3.x 版本之后就改用Proxy进行实现的. 下面我们先来理解下Object.defineProperty作用. 一: 理解Obje

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • vue中的数据绑定原理的实现

    vue中的数据绑定原理的实现

    本文主要介绍了vue中的数据绑定原理的实现,分享给大家,也给自己留个笔记,具体如下: vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的.当前学习源码为vue2.0 源码关键目录 src |---core | |---instance | |---init.js | |---state.js | |---observer | |---dep.js | |---watcher.js 当我们实例化一个vue应用的时候,会伴随着各种的初始化工作,相关的初始化工作代码在init.js文件中 //

随机推荐