VUE框架手写实现VUE数据代理机制------VUE框架

小鱼儿 2024-02-17 09:45 9阅读 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 type="text/javascript" src="../js/myVue.js"></script>
>     </head>
>     <body>
>         
>         <script type="text/javascript">
>             const vm = new Vue({
>                 data : {
>                     msg : "Hello",
>                     name : "Jack",
>                     age : 30
>                 }
>             });
>         </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 type="text/javascript" src="../js/myVue.js"></script>
> 
> </head>
> 
> <body>
> 
> 
> 
> <script type="text/javascript">
> 
> const vm = new Vue(\{
> 
> data : \{
> 
> msg : "Hello",
> 
> name : "Jack",
> 
> age : 30
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

>     class Vue
>     {
>         //定义构造函数
>         constructor(Options)//一个简单的纯粹的JS对象
>         {
>             //options对象类有一个data配置项
>             Object.keys(Options.data).forEach((propertyName,index) => {
>                 console.log(propertyName,index);
>                 Object.defineProperty(this,propertyName,{
>                     get()
>                     {
>                         return Options.data[propertyName];
>                     },
>                     set(val)
>                     {
>                         Options.data[propertyName] = val;
>                     }
>                 });
>             });
>         }
>     }
> 
> class Vue
> 
> \{
> 
> //定义构造函数
> 
> constructor(Options)//一个简单的纯粹的JS对象
> 
> \{
> 
> //options对象类有一个data配置项
> 
> Object.keys(Options.data).forEach((propertyName,index) => \{
> 
> console.log(propertyName,index);
> 
> Object.defineProperty(this,propertyName,\{
> 
> get()
> 
> \{
> 
> return Options.data\[propertyName\];
> 
> \},
> 
> set(val)
> 
> \{
> 
> Options.data\[propertyName\] = val;
> 
> \}
> 
> \});
> 
> \});
> 
> \}
> 
> \}