为了账号安全,请及时绑定邮箱和手机立即绑定

MVVM MVC vue 与react

标签:
Vue.js React

jQuery跟mvvm的区别:


通过一个todolist来对比下。


5bc5b9390001ad4d02940300.jpg


5bc5b9310001caa502210300.jpg


很明显,jQuery是直接操控dom的,而且视图跟model操作是没有分开的,而且操控的是实际的dom,并非是数据驱动。


而Vue是数据跟视图分离开的,然后由数据驱动视图的更新。


1.数据跟视图的分离,解耦

2.数据驱动视图,只关心数据变化,DOM操作被封装


MVC:view model controller

5bc5b923000149e503000293.jpg


5bc5b91b0001472102600300.jpg

5bc5b9120001fdeb03000150.jpg


MVVM:view model viewModel




5bc5b9080001c8a303000186.jpg

那么使用mvvm框架中,vue改变model中data的值,会反映到视图的改变,那么vue的响应式是如何实现的呢?

核心api:Object.defineProperty;将data的属性代理到vm上。

下面是模拟实现:

var vm = {}
        var data = {
            name: 'zhangsan',
            age: 20
        }
        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                    }
                })
            })(key)
        }

我们在vue中书写的vue文件模板是没法直接运行的,那么怎么解析模版到最后渲染成正常的html代码呢?

首先我们应该知道模板的本质是什么,模板是一整串有逻辑的字符串。

模板最后必须转换成js代码,因为里面有逻辑(v-if v-for)

,必须使用js才能实现(图灵完备),需要转换成html渲染页面,必须用js才能实现。

因此模板最重要的要能转换成一个js函数返回vnode(render函数)


下面render函数简单模拟实现:

var vm = new Vue({
            el: '#app',
            data: {
                price: 100
            }
           })
      // 以下是模拟的 render 函数
        function render() {
            with(this) {  // this 就是 vm
                return _c(
                    'div',
                    {
                        attrs: {'id': 'app'}
                    },
                    [
                        _c('p', [_v(_s(price))])
                    ]
                )
            }
        }
        function render1() {
            return vm._c(
                'div',
                {
                    attrs: {'id': 'app'}
                },
                [
                    vm._c('p', [vm._v(vm._s(vm.price))])
                ]
            )
        }

vm._c是创建元素节点,vm._v是创建文本节点,vm._s是toString,vm.price 是把data属性代理到vm,然后返回data.price

那么在vue的生命周期里,render函数是怎么起作用的呢?


5bc5b8de0001872603000184.jpg


下面总结一下vue的整个实现流程

第一步:解析模板成render函数

1.with的用法

2.模板中的信息都被render函数包含

3.模板中用到的data中的属性,都变成了js变量

4.模板中的v-model v-for v-on都变成了js逻辑

5.render函数返回vnode


5bc5b8d400017c8403000129.jpg

5bc5b8cc0001db6801930300.jpg



第二步:响应式开始监听

1.Object.defineProperty

2.将data的属性代理到vm上


var vm = {}
        var data = {
            name: 'zhangsan',
            age: 20
        }
        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                    }
                })
            })(key)
        }

第三部:首次渲染,显示页面,且绑定依赖

1.初次渲染,执行updateComponent,执行vm._render(),也就是第一步返回的render函数

2.执行render函数,会访问到vm.list 和vm.title

3.会被响应式的get方法监听到

4.执行updateComponent,会走到vdom的patch方法,

5.patch将vnode渲染成dom,初次渲染完成

5bc5b8ae0001872603000184.jpg


第四部:data属性变化,触发rerender

有了之前第二步的监听属性的set跟get之后


 Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                }
          })

接下来就是第四步的内容了。

1.修改属性被响应式的set监听到

2.set中执行updateComponent,这一步是异步的,所以vue的属性的修改也是异步的

3.updateComponent重新执行vm._render()

4.生成的vnode跟prevVnode,通过patch进行对比


React

组件化的理解:

1.组件的封装:封装组件的视图,数据,变化逻辑

2.组件的复用:props传递,复用

JSX是什么?

JSX其实是语法糖

开发环境将JSX编译成JS代码

JSX的写法大大降低了学习成本跟编码的工作量

JSX和vdom的关系:

1.jsx为什么需要vdom:jsx需要渲染成html,数据驱动视图

React.createElement和h,都生成vnode,createElement需要考虑自定义组件的名称,然后将其解析为自定义组件的render函数。

何时patch:ReactDom.render() 这个方法是在初次渲染的时候,执行了patch($el,Vnode)

setState在数据更新rerender的时候,执行了patch(preVnode,newVnode)

自定义组件的解析:初始化实例,然后执行render

例如List组件,
会经过类似这样的过程:
var list =new List({data:this.state.listData})
var vnode=list.render()

React setState的过程

setState是异步的,vue修改属性也是异步的

setState的过程步骤:

1.每个组件的示例,都有renderComponent方法,

2.执行renderComponent会重新执行实例的render

3.render函数返回newVnode,然后拿到preVnode,

4.执行patch(preVnode,newVnode)


模拟代码
renderComponent(){
const prevVnode=this._vnode;
const newVnode=this.render();
patch(prevVnode,newVnode);
this._vnode=newVnode;
}

为什么要异步,提高效率,如果用户多次setState,只要最终效果,渲染一遍。

React 与 Vue 的本质区别

1.vue 本质是MVVM框架,由MVC发展而来。React 本质是前端组件化框架,由后端组件化发展而来

2.vue使用模板,React使用JSX

3.React本身就是组件化,没有组件化就不是React。vue也支持组件化,不过是在MVVM上的扩展

React 与 Vue 共同点

支持组件化,数据驱动视图


点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消