搜索到
1
篇与
的结果
-
数据代理 Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）优点：方便操作data中的数据基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，同时指定getter/setter，在getter/setter内部去操作（读/写）data中对应的属性（1）数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> </head> <body> <!-- 通过一个对象代理另一个对象中属性的操作 --> <script type="text/javascript"> let obj = {x:100} let obj1 = {y:200} Object.defineProperty(obj1, 'x', { get() { return obj.x }, set(value) { obj.x = value } }) </script> </body> </html>（2）Vue中的数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false /* let data = { name: '孙笑川' } //创建Vue实例 const vm = new Vue({ el: '#root', //vm._data = options.data = data //vm._data === data true data }) */ const vm = new Vue({ el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>（3）Object.defineProperty方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> </div> <script type="text/javascript"> let num = 33; let person = { name: '孙笑川' } Object.defineProperty(person, 'age', { // value: 33, // //控制属性是否可以枚举，默认值false // enumerable: true, // //控制属性是否可以被修改，默认值false // writable: true, // //控制属性是否可以被删除，默认值false // configurable: true //当读取age属性时，get函数(getter)就会被调用，且返回值就是age的值 get() { console.log("age属性被读取了"); return num; }, //当修改age属性时，set函数(setter)就会被调用，同时收到修改的具体值 set(value) { console.log("age属性被修改了，值为：", value); num = value }, }) console.log(person) </script> </body> </html>
