目录
1. Vue的vm(实例化的对象)
下方的代码中,
- msg是属于this的,this代表的其实是vm,而vm就是实例化的对象
- vue模板当中的数据全部都是vm的,所有的方法也是vm的
- 数据一上来要经过数据代理,把date当中的msg,代理到vm身上,vm身上也就有一个同名属性msg,但是并没有真正的值而是多了getter和setter
<!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> </head> <body> <div id="app"> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data() { return { msg: '这是msg' } } }) // </script> </body> </html>
2. Object.defineProperty
<!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> </head> <body> <script> // Object.defineProperty是一个方法(函数) // 函数三要素:功能 参数 返回值 // 功能: 给对象添加或者修改属性,让这个属性是响应式的(这个属性改变引起其他的改变) let obj = { firstName: 'hello', lastName: 'world' }; // 下面的这种写法就写死了,不是响应式的属性 // obj.fullName = 'hello-world' // console.log(obj) // obj.fullName = 'vue' // console.log(obj) Object.defineProperty(obj, 'fullName', { get() { return this.firstName + '-' + this.lastName; }, set(val) { let arr = val.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } }); console.log(obj.fullName); obj.fullName = 'vue-good'; console.log(obj); </script> </body> </html>
数据代理的另外的例子,
### 打印vm.msg的值,这个值其实是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> </head> <body> <script> // Object.defineProperty是一个方法(函数) // 函数三要素:功能 参数 返回值 // 功能: 给对象添加或者修改属性,让这个属性是响应式的(这个属性改变引起其他的改变) let obj = { firstName: 'hello', lastName: 'world' }; // 下面的这种写法就写死了,不是响应式的属性 // obj.fullName = 'hello-world' // console.log(obj) // obj.fullName = 'vue' // console.log(obj) Object.defineProperty(obj, 'fullName', { get() { return this.firstName + '-' + this.lastName; }, set(val) { let arr = val.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } }); console.log(obj.fullName); obj.fullName = 'vue-good'; console.log(obj); // 数据代理 let data = { msg: '这是msg' }; let vm = {}; Object.defineProperty(vm, 'msg', { get() { return data.msg; }, set() { data.msg = val; } }); console.log(vm); console.log(vm.msg); </script> </body> </html>
Vue封神之路(4.) Vue的数据代理初步认识
最新推荐文章于 2024-08-16 23:32:06 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)