Fork me on GitHub

Vue2中的数据代理

Object.defineproperty

1.基本使用

let number = 18
let person = {
        name:'小明',
        sex:'男',
　　　　　//age:number //如果设定了值 这个值就会被遍历、读取和修改，且一旦设定不能直接改变 需要重新赋值才能改变
} 
//通过这个方法添加的属性不能被枚举(遍历)
 Object.defineProperty(person,'age',{
 // value:18, 
// enumerable:true,
//控制属性是否可以枚举 默认FALSE
 // writable:true,//控制属性是否可以被修改 默认FALSE
 // configurable:true,//控制属性是否可以被删除 默认FALSE 
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值是age的值 
 get() { 
     console.log("有人读取的age的值"); 
     return number 
  },
 //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到age的值 
 set(value) { 
     console.log("有人修改的age的值",value);
     number = value
   } 
})
//把所有属性的属性名提取出来 变成一个数组
console.log(Object.keys(person))
 

2.Vue 2 中的数据代理：

数据代理:通过一个对象代理另一个对象中属性的值的操作
 //data中的数据存到了_data里面 如果是Vue外部定义的对象也会把data先存到option中然后再存到_data中
  let vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      address:'山东'
    }
  })
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{_data.message}}</h1>
  <p>{{_data.address}}</p>
</div>
</body>
</html>

 

 

 

 

 输出一下vm，我们可以发现，data中的数据都存入了vm中的_data里面

 

 

posted @ 2022-03-27 11:27  十点差三分yn  阅读(157)  评论(0)  编辑  收藏  举报
1