Vue : Object.defineProperty()

简介: Vue : Object.defineProperty()


给对象添加属性:

<script>
    let person = {
        name : '张三',
        sex : '男'
    }
    Object.defineProperty(person,'age',{
        value : 18
    })
    console.log(person)
 
</script>

控制台查看:

但是添加的属性是不能被遍历的:

但是如果你想又使用defineProperty添加属性, 又想遍历, 那么就在这个defineProperty的第三个参数中添加字段: enumerable (是否可以枚举)

    let person = {
        name : '张三',
        sex : '男'
    }
    Object.defineProperty(person,'age',{
        value : 18,
        enumerable : true
    })
    console.log(person)

但是这个又会引来另外一个问题, 这个添加的字段虽然可以被遍历, 但是不能被修改:

这个时候又需要添加另外一个参数:

writable: true

    let person = {
        name : '张三',
        sex : '男'
    }
    Object.defineProperty(person,'age',{
        value : 18,
        enumerable : true,
        writable : true
    })
    console.log(person)

       同时想要让这个数据可以被正常删除, 就需要添加 configurable键值对

如果是configurable : true则表示可以删除, 反之不能删除


目录
相关文章
|
3月前
|
JavaScript 前端开发 开发者
讲述Vue框架中用于对象响应式变化的Object.defineProperty函数。
综上所述,Vue.js通过 `Object.defineProperty()`提供了强大的响应式能力,使得状态管理变得简洁高效。这种能力是Vue.js受到广大开发者青睐的重要原因之一。尽管Vue 3.x使用Proxy替代了该方法,但对于Vue 2.x及其之前版本,`Object.defineProperty()`是理解Vue.js内部工作机制不可或缺的一部分。
130 27
|
JavaScript
vue学习(7)Object.defineProperty
vue学习(7)Object.defineProperty
90 2
|
12月前
|
JavaScript
Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Vue 的响应式原理主要依赖于 `Object.defineProperty`,但该方法存在一些缺陷:无法检测到对象属性的添加和删除,且对大量数据进行代理时性能较差。Vue 3 中改用了 Proxy 来解决这些问题。
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
716 0
|
监控 JavaScript 索引
深入理解vue2.x中Object.defineproperty()和vue3.x中Proxy
深入理解vue2.x中Object.defineproperty()和vue3.x中Proxy
336 0
深入理解vue2.x中Object.defineproperty()和vue3.x中Proxy
|
JavaScript 数据安全/隐私保护 开发者
常见的vue面试中的proxy和object.defineProperty的区别
常见的vue面试中的proxy和object.defineProperty的区别
|
JavaScript
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
|
JSON JavaScript 数据格式
vue query传参刷新后数据变成[Object Object]
vue query传参刷新后数据变成[Object Object]
281 0
|
人工智能 自然语言处理 JavaScript
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
201 0
|
JavaScript 容器
Vue初学-----模板语法,数据绑定,Object.defineProperty()事件等基础1
Vue初学-----模板语法,数据绑定,Object.defineProperty()事件等基础1

热门文章

最新文章