vue实现的三个步骤讲解(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于vue实现的三个步骤讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Vue是当今热门的框架,他可以进行数据双向绑定,为什么vue会大受欢迎,我知道的原因大致如下?

1.传统改变dom结构的操作是非常浪费性能的操作(就是慢)
2.把dom结构改变的逻辑放在js层来做可以提高性能。
3.数据和视图的分离更符合面向对象的编程,mvvm

vue的实现也是和react一样用虚拟dom来实现的,至于什么是虚拟dom,就是用js通过模板渲染而成的dom。

vue实现的步骤大概是这三步:

1、响应式:vue怎么监听到dota的每个属性值的变化?
2、模板引擎:vue的模板如何解析的,指令是如何处理的?
3、模板渲染:如何把data里的数据加入模板并渲染成html?

第一步:响应式

响应式的实现主要是依靠一个对象的方法:

Object.defineProperty

这个方法能够监听对象中属性的变化而进行逻辑处理

dome如下:

    var obj={}     var _name ='zhangsan'     Object.defineProperty(obj,'name',{         get:function() {             console.log('get')             return _name         },         set: function(newVal) {             console.log('set')             _name=newVal         }     })

这里你改变name的值或者访问name的值就会有打印信息

而在vue中模拟实现,大概是这样的:

        var vm ={}         var data={name:'张三',age:20}         var key,value;         for(key in data) {             (function(key){                 Object.defineProperty(vm,key,{  //绑定到vm上                     get:function(){                         console.log('get')                         return data[key];                     },                     set:function(newVal){                         console.log('set');                         data[key]=newVal                     }                 })             })(key)  //闭包处理         }

其实学过java的同学肯定对这个不陌生,java的类里面可以直接生成get和set方法

第二步:解析模板

模板必须要转化成js代码,因为:
1.逻辑判断(v-if,v-for),必须要用js才能实现.
2.虚拟dom的渲染,必须要使用js才能实现。(render函数)

模板1

    <div id="app">         <p>{{price}}</p>     </div>

模板1转化的render

           with(this) { //this就是vm                 return _c(                     'p',                     {                         attrs:{'id':'app'}                     },                     [                         // _c是createElement                         // _v是createTextVNode                         // _s是toString方法                         _c('p',[_v(_s(price))])                     ]                 )             }

模板2

    <div id="app">         <div>             <input v-model="title">             <button v-on:click="add">submit</button>         </div>         <div>             <ul>                 <li v-for="item in list">{{item}}</li>             </ul>         </div>     </div>

模板2转化的render

           with (this) {                 return _c(                     'p',                     { attrs: { "id": "app" } },                     [                         _c(                             'p',                             [                                 _c(                                     'input',                                     {                                         //指令                                         directives: [                                             {                                                 name: "model",                                                 rawName: "v-model",                                                 value: (title),    //vm.title                                                 expression: "title"                                             }                                         ],                                         domProps: {                                             "value": (title) //vm.title                                          },                                         on: {                                             "input": function ($event) {                                                 if ($event.target.composing) return;                                                 title = $event.target.value                                             }                                         }                                     }                                 ),                                 _v(" "),                                 _c(                                     'button',                                     {                                         on: { "click": add }  //vm.add                                     },                                     [                                         _v("submit")                                     ]                                 )                             ]                         ),                         _v(" "),                         _c(                             'p',                             [                                 _c(                                     'ul',                                     _l(                                         (list), function (item) {                                             return _c(                                                 'li',                                                 [                                                     _v(_s(item))                                                 ]                                             )                                         }                                     )                                 )                             ]                         )                     ]                 )                  }

这就是用于渲染的render函数

第三步:把模板加上数据渲染成html

vm._update(Vnode) {     const prevVonde=vm._Vnode     vm._Vnode=Vnode;     if(!prevVnode) {  //如果没有之前的vnode,第一次渲染         vm.$el=vm._patch_(vm.$el,Vnode)     }else {         vm.$el=vm._patch_(prevVnode,Vnode)     } } function updataComponent() {     //vm._reander就是解析模板的rende函数,返回了一个vnode     vm._update(vm._render()) }

这里的vm_.patch_里面就是复杂的diff算法了。根据dom的差别来渲染,里面使用来很多的递归调用,而且里面最要涉及到很多效率问题,天下武功为快不破嘛。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » vue实现的三个步骤讲解(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情