VUE框架通过手写VUE框架解析vm对象的methods使用方法的原理------VUE框架

淩亂°似流年 2024-02-17 10: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>
>             <h1>计数器:{
>         {value}}</h1>
>             <button @click="Plus">点我哈</button>
>         </div>
>         <script>
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello Vue!",
>                     value : 1
>                 },
>                 // method中的方法可以通过vm去访问
>                 // method的方法是不做数据代理的,就是单纯的方法而已
>                 // (...)这种就是做了数据代理的
>                 methods : 
>                 {
>                     Plus()
>                     {
>                         // vm.$data.value++;
>                         this.value++;
>                         // vm和this对象是同一个对象
>                         console.log(vm === this);
>                     },
>                     add2:()=>
>                     {
>                         // 箭头函数中没有this,箭头函数的this是从父级作用域继承过来的
>                         // 对于当前程序来说,父级作用域是全局作用域window
>                         console.log(this === vm);
>                         this.value++;
>                     },
>                     sayHi()
>                     {
>                         alert("HhHhHh");
>                     }
>                 }
>             });
>         </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>
> 
> <h1>计数器:\{ \{value\}\}</h1>
> 
> <button @click="Plus">点我哈</button>
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello Vue!",
> 
> value : 1
> 
> \},
> 
> // method中的方法可以通过vm去访问
> 
> // method的方法是不做数据代理的,就是单纯的方法而已
> 
> // (...)这种就是做了数据代理的
> 
> methods :
> 
> \{
> 
> Plus()
> 
> \{
> 
> // vm.$data.value++;
> 
> this.value++;
> 
> // vm和this对象是同一个对象
> 
> console.log(vm === this);
> 
> \},
> 
> add2:()=>
> 
> \{
> 
> // 箭头函数中没有this,箭头函数的this是从父级作用域继承过来的
> 
> // 对于当前程序来说,父级作用域是全局作用域window
> 
> console.log(this === vm);
> 
> this.value++;
> 
> \},
> 
> sayHi()
> 
> \{
> 
> alert("HhHhHh");
> 
> \}
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

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

>     <!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/myVue.js"></script>
>     </head>
>     <body>
>         <script>
>             const vm = new Vue({
>                 data : {
>                     msg : "Hello Vue"
>                 },
>                 methods : 
>                 {
>                     sayHi()
>                     {
>                         alert(this === vm);
>                         console.log(123);
>                     },
>                     sayHello()
>                     {
>                         alert(456);
>                     }
>                 }
>             });
>         </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/myVue.js"></script>
> 
> </head>
> 
> <body>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> data : \{
> 
> msg : "Hello Vue"
> 
> \},
> 
> methods :
> 
> \{
> 
> sayHi()
> 
> \{
> 
> alert(this === vm);
> 
> console.log(123);
> 
> \},
> 
> sayHello()
> 
> \{
> 
> alert(456);
> 
> \}
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>