【Vue】轻松理解数据代理

简介: 【Vue】轻松理解数据代理

hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~

Object定义配置方法

代码

引出数据代理,先上代码,后加解释

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>回顾Object.defineproperty方法</title>
 </head>
 <body>
  <script type="text/JS" >
   let number = 18
   let person = {
    name:'张三',
    sex:'男', 
   }
// 它的功能是给person配置一个age属性
   Object.defineProperty(person,'age',{
    // value:18, 
    // enumerable:true, //控制属性是否可以枚举,默认值是false,f12可以看到颜色为浅色,用Object.keys(person)获取不到age的key(不可枚举)
    // writable:true, //控制属性是否可以被修改,默认值是false
    // configurable:true //控制属性是否可以被删除,默认值是false
    //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    //get:function(){}=
    get(){
    // 如果不这样关联,number值不变,从上往下执行完结束,是修改不了的必须关联
     console.log('有人读取age属性了')
     return number
    },
    //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
    set(value){
     console.log('有人修改了age属性,且值是',value)
     number = value
    }
   })
   // console.log(Object.keys(person))
   console.log(person)
  </script>
 </body>
</html>

image-20230812002421058

writable:false 默认false时不可以修改

image-20230812003530814

writable:true

image-20230812003444218

直接写进对象中是可以随意修改删除的,但加了配置项就不是随意了,想要修改删除需要配置

当加入getter时,定义的属性就会随着修改而变化,属性通过调用属性get而控制-invoke property getter

image-20230812004517285

数据代理

通过一个对象代理对另外一个对象中属性进行修改操作

代码实现

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>何为数据代理</title>
 </head>
 <body>
  <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
  <script type="text/JS" >
   let obj = {x:100}
   let obj2 = {y:200}
   Object.defineProperty(obj2,'x',{
    get(){
     return obj.x
    },
    set(value){
     obj.x = value
    }
   })
  </script>
 </body>
</html>
  • get 方法中,当你读取 obj2.x 的值时,实际上会返回 obj.x 的值,因为 get 方法内部使用了 obj.x
  • set 方法中,当你设置 obj2.x 的值时,实际上会将这个值赋给 obj.x,从而修改了 obj 对象中的属性 x

在data中的数据都会走数据代理

当你在 Vue 实例的 data 选项中定义数据属性时,Vue 会自动将这些数据属性代理到 Vue 实例上

具体来说,当你在 data 中定义一个属性时,Vue 会将这个属性添加到 Vue 实例上,并且会创建一个内部的响应式数据对象,该对象会跟踪这个属性的变化然后,当你在模板中使用这个属性时,Vue 会建立一个与这个响应式数据对象的绑定,使模板可以在数据变化时自动更新

这个过程实现了数据代理的概念,即在 Vue 实例上代理了 data 中定义的属性,使你可以直接在 Vue 实例中访问这些属性,而实际上这些属性是存储在内部的响应式数据对象中的

下面点击name、age会显示出值,它们都是数据代理,可以更改内容

image-20230813001425128

索奇问答

Q:把方法放到data中会怎样,走代理吗?

A:走代理,虽然定义的方法不应该走代理,它和数据不一样,数据是变化的,而方法是不变的,这样一定加重代码的累赘,

这样没有任何意义,setter & getter 也无处施展

所以还是老实按照正常来写,写到methods中吧

对您有用的话点个免费的赞叭~

相关文章
|
3天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
23 5
|
17小时前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
53 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
1月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
43 3
|
1月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
1月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
1月前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题