Vue之数据代理(getter、setter)

这篇具有很好参考价值的文章主要介绍了Vue之数据代理(getter、setter)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

Object.defineProperty
数据代理


一、数据代理

1.Object.defineProperty()

(1)实例对象可以通过Object.defineProperty()方法来添加属性,但是添加的属性默认不能删除,不能枚举(不可被遍历),不能修改等。该方法中有get函数和set函数,当有人读取添加的该属性,get函数就会被调用,当有人修改添加的的属性时,set函数就会被调用,且会收到修改的具体值。(get函数和set函数就是所谓的getter、setter,所说的功能在(2)代码样例中会体现)

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <script>
        let person = {
                name: "王五",
                age: 20
            }
            //参数依次是要添加的对象、添加的属性名称、添加的属性配置
        Object.defineProperty(person, 'sex', {
            value: "男",
            enumerable: true, //控制属性是否可以枚举,默认值是false
            writable: true, //控制属性是否可以被修改,默认值是false
            configurable: true //控制属性是否可以被删除,默认值是false
        })
        console.log(person);
    </script>
</body>

</html>

Vue之数据代理(getter、setter)
Vue之数据代理(getter、setter)
上面两个图,第一个是修改enumerable为true时,第二个是未修改enumerable的值,默认为false时,可以看出添加的sex在修改前后颜色不一样,实际这就是它能不能枚举的表现。具体我不再演示,大家可以自己用for…of…遍历一下修改前后的。
(2)好多人会疑问,我直接在person对象里直接添加该属性不是更轻松吗,但是这里我跟大家说一下它的好处:当我们对象中的属性是引入的对象外部变量,那么我们在后续对引入外部变量的值修改时,对象里引入的却不会改变。这是就体现了该方法的好处。具体看下面代码:

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <script>
        let sex = "女";
        let person = {
                name: "王五",
                age: 20
            }
            //参数依次是要添加的对象、添加的属性名称、添加的属性配置
        Object.defineProperty(person, 'sex', {
            get() {
                console.log("有人读取了sex属性");
                return sex;
            },
            set(value) {
                console.log("有人修改了sex属性");
                sex = value;
            }
        })
        console.log(person);
    </script>
</body>

</html>

Vue之数据代理(getter、setter)

上面图片是我运行后在控制台的操作,大家可以看出我在访问person对象时,输出了有人读取了sex属性,那说明调用了getter,其实,我在访问对象时,对象中看不到sex属性,是我展开对象后,有个浅色的sex属性,但是这时他的值是…,我点击了一下…才获取的具体值,才调用的getter。大家继续看后面的操作,发现我通过对象访问sex,修改sex是调用了getter,settter的。这些都印证了(1)中所讲。最后我查看sex,这个sex是外部用let定义的对象,发现也发生了修改,所以这就是Object.defineProperty()的魅力。

2.数据代理讲解

  • 通过上面Object.defineProperty()的讲解更易于我们讲诉数据代理。
  • 数据代理就是通过一个对象对另一个对象中属性的操作(读/写)。
  • Vue中的数据代理:通过对象来代理data对象中属性的操作(读/写)
  • Vue数据代理的好处:更加方便的操作data中的数据。
  • 基本原理:通过Object.defineProperty()把data对象中的所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter、setter。在getter、setter内部去操作(读/写)data中对应的属性。

下面引用了尚硅谷老师的例子:

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <p>{{name}}</p>
        <p>{{address}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name: "尚硅谷",
                address: "宏福科技园"
            }
        })
    </script>
</body>

</html>

Vue之数据代理(getter、setter)
vm实例对象时的data对象会加载到vm对象中的_data属性中。而这些实现是Object.defineProperty()API实现的。
Vue之数据代理(getter、setter)
可以看上诉图片中的_data中就是data对象中的数据。而且上面的带有$的属性都可以在Vue模板中直接使用(如{{ $slots}})。大家也可以看见底部有address,name的get,set方法。


总结

以上就是对数据代理的讲解,以及对Object.defineProperty()这个API的简讲。文章来源地址https://www.toymoban.com/news/detail-458322.html

到了这里,关于Vue之数据代理(getter、setter)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ES6】Getter和Setter

    JavaScript中的getter和setter方法可以用于访问和修改对象的属性。这些方法可以通过使用对象字面量或Object.defineProperty()方法来定义。 以下是使用getter和setter方法的示例: 输出: 在上面的示例中,我们使用对象字面量定义了一个名为obj的对象,该对象具有一个名为_value的私有属

    2024年02月11日
    浏览(37)
  • 详解 Vue 3 使用了 Proxy 对象来替代 Vue 2 中的 Object.defineProperty

    在 Vue 2 中,响应式系统使用了 Object.defineProperty 来实现属性的劫持和监听。这种方式需要在对象上定义 getter 和 setter,以便在属性被访问或修改时触发相应的操作。 然而,Object.defineProperty 有一些限制和性能问题。它只能劫持对象的已有属性,无法劫持新增的属性,也无法劫

    2024年02月10日
    浏览(44)
  • Python的getter和setter的方法使用详解

    本文主要内容: 解释setter和getter的使用方法 解释@property装饰器的妙用 在python中,setter和getter方法并不像其它编程语言中的那样。基本上,在面向对象编程语言中,使用setter和getter方法的主要目的是为了确保数据的封装。不像其它面向对象编程语言,python中的私有变量并不是

    2023年04月12日
    浏览(37)
  • 使用object.defineProperty来更新数据示例

    vue+element UI 第001个 查看专栏目录: 按照VUE知识点 ------ 按照element UI知识点 echarts,openlayers,cesium,leaflet,mapbox,d3,canvas 免费交流社区 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操

    2024年02月06日
    浏览(29)
  • 关于使用SSM+JSP开发时setter、getter隐式调用问题的小结

    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://www.cnblogs.com/cnb-yuchen/p/17977495 出自【进步*于辰的博客】 之前使用SSM+JSP做网站开发,由于没有注意setter、getter的隐式调用问题,出现了多次bug,对开发进度影响挺大。因此,特来作这篇文章跟大

    2024年01月21日
    浏览(55)
  • JavaSE学习之路:Idea小技巧一键生成标准JavaBean(一键生成构造方法和Setter和Getter方法)

    1.生成有参和无参构造函数 2.生成Getter和Setter方法 3.生成toString方法 1.安装插件 2.右键-使用插件

    2024年02月12日
    浏览(33)
  • JavaScript之Object.defineProperty()

    经常使用的定义与赋值方法 obj.prop =value 或者 obj[\\\'prop\\\']=value Object.defineProperty() 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 obj 需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符 一般通过为对象的属性赋值的情况下,对象的属

    2024年02月09日
    浏览(33)
  • 【javaScript】Proxy与Object.defineProperty的区别

    Proxy和Object.defineProperty都是JavaScript中用于实现对象属性拦截和代理的机制,但它们在功能和应用方面有一些区别。 Object.defineProperty:它是 ES5 引入的属性定义方法,通过直接定义对象属性的特性(如可枚举性、可写性等),可以拦截属性的读取、写入和删除操作。但它 只能拦

    2024年02月08日
    浏览(38)
  • js通过Object.defineProperty() 定义和控制对象属性

    用于给一个对象定义一个新属性或是修改某个现有属性,并返回此对象。 Object.defineProperty(obj,prop,descriptor)  它接收 3 个参数,第 1 个是要定义属性的对象;第 2 个是要定义或修改的属性的属性名或 Symbol;第 3 个是对该属性的描述,称之为属性描述符,为一个对象,可以拥有

    2024年03月09日
    浏览(50)
  • vue之vuex的getters详解

    1.getters:类似是Vuex中的计算属性,也具有缓存功能:如果state中的数据得到了改变,那么getters中的属性的值也会发生改变,如果state的值没有发生任何变化,那么getters中的属性,的值就不会发生改变 (1)例如state里有个list数据: (2)再gitters里通过filter方法过滤出需要的数

    2024年02月07日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包