VUE框架VM对象数据代理机制的实现原理------VUE框架

阳光穿透心脏的1/2处 2024-02-17 09:22 29阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         
>         
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>         </div>
>         <script>
>             // 目标对象
>             let target = {
>                 name : "zhangSan"
>             };
>             // 代理对象
>             let proxy = {};
>             // 那么如果我们需要实现数据代理机制,就需要给proxy增加一个name属性
>             Object.defineProperty(proxy,"name",{
>                 // 有三个点就代表这个属性是代理出来的
>                 // 他需要动态获取,在此之前是未知的
>                 get()
>                 {
>                     // 间接访问目标对象的属性
>                     return target.name;
>                 },
>                 set(value)
>                 {
>                     // 修改代理对象就可以改目标对象
>                     target.name = value;
>                 }
>             });
>             // 这就是我们的VM对象实现代理的底层方式
>             // let target = {
>             //     name : "zhangSan"
>             // };
>             // const vm = new Vue({
>             //     el : "#app",
>             //     data : target
>             // });
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     // 这里也是依赖get和set实现的获取值
>                     msg : "Hello!!!",
>                     // vue实例不会给以_和$符号开始的属性名做数据代理
>                     _name : "啊哈哈哈",
>                     $age : 20
>                     // 因此data的属性名字不能以$和_开始作为属性名
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> 
> 
> 
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> </div>
> 
> <script>
> 
> // 目标对象
> 
> let target = \{
> 
> name : "zhangSan"
> 
> \};
> 
> // 代理对象
> 
> let proxy = \{\};
> 
> // 那么如果我们需要实现数据代理机制,就需要给proxy增加一个name属性
> 
> Object.defineProperty(proxy,"name",\{
> 
> // 有三个点就代表这个属性是代理出来的
> 
> // 他需要动态获取,在此之前是未知的
> 
> get()
> 
> \{
> 
> // 间接访问目标对象的属性
> 
> return target.name;
> 
> \},
> 
> set(value)
> 
> \{
> 
> // 修改代理对象就可以改目标对象
> 
> target.name = value;
> 
> \}
> 
> \});
> 
> // 这就是我们的VM对象实现代理的底层方式
> 
> // let target = \{
> 
> // name : "zhangSan"
> 
> // \};
> 
> // const vm = new Vue(\{
> 
> // el : "\#app",
> 
> // data : target
> 
> // \});
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> // 这里也是依赖get和set实现的获取值
> 
> msg : "Hello!!!",
> 
> // vue实例不会给以\_和$符号开始的属性名做数据代理
> 
> \_name : "啊哈哈哈",
> 
> $age : 20
> 
> // 因此data的属性名字不能以$和\_开始作为属性名
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>