vue数据代理(下)

简介: 笔记

但是我们通过方法,是不能修改key的值的16.png

如果非要修改key的值,我们需要新增一个属性

// 控制属性是否可以被修改,默认false不允许
 writable:true

17.png

这时候再来修改key的值,就没问题了

18.png

我们通过直接添加属性,可以随意修改删除属性,直接在控制台输入delete object.key

1.png2.png

如果我们使用对象删除.就不能使用这种方式随意修改删除了.删除指令直接返回false,也就是失败

3.png

如果想要删掉,也需要新增一个配置项

// 控制属性是否可以被删除,默认false不允许
configurable:true

4.png5.png

这些属性只是列出其中几个,完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        // 定义一个对象
        let person={
            name:'张三',
            sex:'男'
        }
       // 给person对象新增一个age属性
        Object.defineProperty(person,'age',{
            value:'18',
            // 控制属性是否可以被枚举 默认false不允许
            enumerable:true,
            // 控制属性是否可以被修改,默认false不允许
            writable:true,
            // 控制属性是否可以被删除,默认false不允许
            configurable:true
        })
        console.log(person)
    </script>
</body>
</html>

defineProperty高级配置项

还是上面的例子,现在有一个新的需求,我们定义一个变量number,要求它的值就是age,并且age要随着number的值变化进行动态变化

想要实现这个需求,需要借助get(getter)函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        // 定义一个属性,要求person的age必须要跟着这个变量进行变化
        let number=11100
        // 定义一个对象
        let person={
            name:'张三',
            sex:'男',
            age:number
        }
       // 给person对象新增一个age属性
        Object.defineProperty(person,'age',{
            // value:'18',
            // // 控制属性是否可以被枚举 默认false不允许
            // enumerable:true,
            // // 控制属性是否可以被修改,默认false不允许
            // writable:true,
            // // 控制属性是否可以被删除,默认false不允许
            // configurable:true
            // get函数什么时候被调用?
            // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get:function(){
                return number
            }
        })
        console.log(person)
    </script>
</body>
</html>

6.png

查看浏览器,需要点击三个点才能获取到数据

7.png

如果我们想修改数据也是没问题的,会随着修改的属性值进行动态获取变化

8.png

既然有get,那么就有set

当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值9.png

我们验证下,可以通过set去修改数据进行动态变化并且get读取数据

10.png

理解数据代理


我们写一段代码简单理解数据代理

简单来说,数据代理就是:通过一个对象代理另一个对象中属性的操作(读/写)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 数据代理:通过一个对象代理另一个对象中属性的操作(读/写) -->
    <script type="text/javascript">
       let a={x:100}
       let b={y:200}
       Object.defineProperty(b,'x',{
            get(){
                return a.x
            },
            set(value){
                a.x=value
            }
       })
    </script>
</body>
</html>

浏览器测试

11.png

vue的数据代理


首先做一个简单的数据绑定

12.png13.png

通过vm可以访问到name和address,说明data是被代理的

14.png

总结


1 vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

2 vue中的数据代理的好处

更加方便的操作data中的数据

3 基本原理

通过Object.defineProperty()把data对线中所有属性添加到vm上

为每一个添加到vm上的属性,都准备一个getter/setter方法

在getter/setter内部去操作(读/写)data中对应的属性


相关文章
|
12天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章
|
12天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
26 1
vue学习第九章(v-model)
|
12天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
27 1
vue学习第十章(组件开发)
|
17天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
26 3
|
17天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
36 2
|
18天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
18天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
18天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
18天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
19天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。