JavaScript从初级往高级走系列————MVVM-Vue

原创 Bios 随笔 js 79阅读 12 天前 举报

原文博客地址:https://finget.github.io/2018/05/31/mvvm-vue/

MVVM

  • 如何理解 MVVM
  • 如何实现 MVVM
  • 是否解读过 Vue 的源码

Jquery 与 框架的区别

jquery 实现 todo-list

vue 实现 todo-list

两者的区别

  • 数据和视图的分离,解耦(开放封闭原则,对扩展开放,对修改封闭)

    在jQuery中在jQuery代码中操作视图和数据,混在一块了

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

    只改数据,视图自动更新

MVVM的理解

  • MVC (Model View Controller)

  • MVVM (Model View ViewModel)

View 通过 事件绑定 (DOM Listeners) 操作Model; Model通过 数据绑定 (Data Bindings)操作View。

Vue 三要素

  • 响应式: Vue 如何监听到 data 的每个属性变化?
  • 模板引擎: Vue 的模板如何被解析,指令如何处理?
  • 渲染:Vue 的模板如何被渲染成Html?

Vue中如何实现响应式

什么是响应式

  • 修改 data 属性之后, Vue 立刻监听到
  • data 属性被代理到 vm上

Object.defineProperty,Vue核心函数

上面是无法监听对象的属性的访问以及赋值操作的,直接就产生了操作的结果。

Vue 中何如解析模板

模板是什么

  • 本质: 字符串
  • 有逻辑, 如v-if v-for
  • 与 html 标签格式很像,但有很大区别(html是静态的,模板是动态的)
  • 最终还要转换为 html 来显示
    • 模板最终必须转换成 JS 代码
    • 有逻辑(v-if v-for 等),必须用JS才能实现(图灵完备)
    • 因此,模板最重要转成一个JS函数(render函数)

render函数

with -- 实际开发不推荐用
render

模板将变成下面这个样子:

看todo-list的render

在vue源码里alert render 函数

以上面vue实现的todolist为例:

render 与 Vdom

可以先看一下virtualDom

  • vm._c 其实相当于 snabbdom 中的 h 函数
  • render 函数执行之后,返回的是 vnode

  • updateComponent 中实现了 vdom 的 patch
  • 页面首次渲染 执行updateComponent
  • data 中每次修改属性, 执行 updateComponent
vue 的整个实现流程
  • 第一步: 解析模板成render函数
    • with 的用法
    • 模板中的所有信息都被render函数包含
    • 模板中用到的data中的属性,都变成了js变量
    • 模板中的v-model v-if v-on 都变成了 js逻辑
    • render 函数返回 vnode


  • 第二部: 响应式开始监听
    • Object.defineProperty
    • 将 data 的属性代理到 vm 上

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

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

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复