VUE框架底层源代码解读------VUE框架

偏执的太偏执、 2024-02-17 09:47 6阅读 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>{
>         {name}}</h1>
>             <h1>{
>         {age}}</h1>
>         </div>
>         <script>
>             const vm = new Vue({
>                 // Vue源码中关键性代码
>                 // var data = vm.$options.data;
>                 // 此处是获取data,程序执行到此处仍然没有给vm加上_data属性
>                 // data = vm.data = isFunction(data) ? getData(data,vm) : data
>                 // 程序执行完这个代码后,VM上多了一个_data的属性
>                 // 通过以上源码可知,data不一定是一个{}json对象,也可以是一个函数
>                 // 此处的代码含义是,如果data是函数,则调用getData(data,vm)来获取data
>                 // 如果不是函数,则直接将data返回,给data变量赋值给vm._data属性
>                 // 程序执行到这里为什么要给VM拓展一个_data属性
>                 // 重点函数
>                 // function isReserved(str)
>                 // {
>                 //     var c = (str + '').charCodeAt(0);
>                 //     return c === 0x24 || c === 0x5f;
>                 // }
>                 // 这个函数就是用来判断字符串是否以_或$开始
>                 // true表示是,false表示否
>                 // 重点函数
>     //             function proxy(target, sourceKey, key) {
>     //       sharedPropertyDefinition.get = function proxyGetter() {
>     //           return this[sourceKey][key];
>     //       };
>     //       sharedPropertyDefinition.set = function proxySetter(val) {
>     //           this[sourceKey][key] = val;
>     //       };
>     //       Object.defineProperty(target, key, sharedPropertyDefinition);
>     //   }
>                 el : "#app",
>                 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 src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> <h1>\{ \{name\}\}</h1>
> 
> <h1>\{ \{age\}\}</h1>
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> // Vue源码中关键性代码
> 
> // var data = vm.$options.data;
> 
> // 此处是获取data,程序执行到此处仍然没有给vm加上\_data属性
> 
> // data = vm.data = isFunction(data) ? getData(data,vm) : data
> 
> // 程序执行完这个代码后,VM上多了一个\_data的属性
> 
> // 通过以上源码可知,data不一定是一个\{\}json对象,也可以是一个函数
> 
> // 此处的代码含义是,如果data是函数,则调用getData(data,vm)来获取data
> 
> // 如果不是函数,则直接将data返回,给data变量赋值给vm.\_data属性
> 
> // 程序执行到这里为什么要给VM拓展一个\_data属性
> 
> // 重点函数
> 
> // function isReserved(str)
> 
> // \{
> 
> // var c = (str + '').charCodeAt(0);
> 
> // return c === 0x24 || c === 0x5f;
> 
> // \}
> 
> // 这个函数就是用来判断字符串是否以\_或$开始
> 
> // true表示是,false表示否
> 
> // 重点函数
> 
> // function proxy(target, sourceKey, key) \{
> 
> // sharedPropertyDefinition.get = function proxyGetter() \{
> 
> // return this\[sourceKey\]\[key\];
> 
> // \};
> 
> // sharedPropertyDefinition.set = function proxySetter(val) \{
> 
> // this\[sourceKey\]\[key\] = val;
> 
> // \};
> 
> // Object.defineProperty(target, key, sharedPropertyDefinition);
> 
> // \}
> 
> el : "\#app",
> 
> 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);
>                 let firstCode = propertyName.charAt(0);
>                 if(firstCode != "$" && firstCode != "_")
>                 {
>                     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);
> 
> let firstCode = propertyName.charAt(0);
> 
> if(firstCode != "$" && firstCode != "\_")
> 
> \{
> 
> Object.defineProperty(this,propertyName,\{
> 
> get()
> 
> \{
> 
> return Options.data\[propertyName\];
> 
> \},
> 
> set(val)
> 
> \{
> 
> Options.data\[propertyName\] = val;
> 
> \}
> 
> \});
> 
> \}
> 
> \});
> 
> \}
> 
> \}