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

codercao 发布于2019-08-23 13:46 / 2794人阅读

摘要：原文博客地址如何理解如何实现是否解读过的源码与框架的区别实现实现独立初始化实例两者的区别数据和视图的分离，解耦开放封闭原则，对扩展开放，对修改封闭在中在代码中操作视图和数据，混在一块了以数据驱动视图，只关心数据变化，

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

MVVM

如何理解 MVVM

如何实现 MVVM

是否解读过 Vue 的源码

Jquery 与框架的区别 jquery 实现 todo-list

vue 实现 todo-list


  
    
    
  
  
    
      {{item}}

两者的区别

数据和视图的分离，解耦（开放封闭原则，对扩展开放，对修改封闭）

在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上

var vm = new Vue({
  el: "#app",
  data: {
    name: "zhangsan",
    age: 20
  }
})
// vm.name = "zhangsan"
// vm.age = "20"

Object.defineProperty，Vue核心函数

var obj = {
  name: "zhangsan",
  age: 25
}
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听

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

var obj = {}
var _name = "shangsan"
Object.defineProperty(obj, "name", {
  get: function () {
    console.log("get", _name) // 监听
    return _name
  },
  set: function (newVal) {
    console.log("set", newVal)  // 监听
    _name = newVal
  }
})
console.log(obj.name); // 可以监听到
obj.name = "lisi"; // 可以监听到

Vue 中何如解析模板 模板是什么


  
    
    
  
  
    
      {{item}}

本质：字符串

有逻辑，如 v-if v-for 等

与 html 标签格式很像，但有很大区别（html是静态的，模板是动态的）

最终还要转换为 html 来显示

模板最终必须转换成 JS 代码

有逻辑（v-if v-for 等），必须用JS才能实现（图灵完备）

因此，模板最重要转成一个JS函数（render函数）

render函数

with -- 实际开发不推荐用

var obj = {
  name: "zhangsan",
  age: 20,
  getAddress: function () {
    alert("beijing")
  }
}
// 不使用with
function fn() {
  alert(obj.name)
  alert(obj.age)
  obj.getAddress()
}
fn()

// 使用with
function fn1() {
  with(obj) {
    alert(age)
    alert(name)
    getAddress()
  }
}
fn1()

render


  {{price}}

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

function render() {
  with(this) {  // this 就是 vm
    return _c(
      "div",
      {
        attrs: {"id": "app"}
      },
      [
        _c("p", [_v(_s(price))])
      ]
    )
  }
}

看todo-list的render

在vue源码里alert render 函数

以上面vue实现的todolist为例：

with(this){  // this 就是 vm
    return _c( // _c创建一个标签
        "div",
        {
            attrs:{"id":"app"}
        },
        [
            _c(
                "div",
                [
                    _c(
                        "input",
                        {
                            directives:[
                                {
                                    name:"model",
                                    rawName:"v-model",
                                    value:(title),
                                    expression:"title"
                                }
                            ],
                            domProps:{
                                "value":(title)
                            },
                            on:{
                                "input":function($event){
                                    if($event.target.composing)return;
                                    title=$event.target.value
                                }
                            }
                        }
                    ),
                    _v(" "),
                    _c(
                        "button",
                        {
                            on:{
                                "click":add
                            }
                        },
                        [_v("submit")]
                    )
                ]
            ),
            _v(" "),
            _c("div",
               [
                _c(
                    "ul",
                    _l((list),function(item){return _c("li",[_v(_s(item))])}) // _l 解析 v-for 循环
                )
            ]
          )
        ]
    )
}

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

最后

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

超融合服务器专线服务从电脑往u盘下载视频怎么转码阿里云的服务器从公账怎么走 javascript初级入门 javascript初级教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99542.html

JavaScript从初级往高级走系列————prototype

摘要：原文博客地址另一篇转载的从初级往高级走系列原型定义原型是对象的一个属性，它定义了构造函数制造出的对象的公共祖先。原文博客地址：https://finget.github.io/2018/09/13/proto/另一篇转载的JavaScript从初级往高级走系列————prototype 原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通...

SKYZACK 2019-08-23 13:45 评论0 收藏0
JavaScript从初级往高级走系列————异步

摘要：之所以是单线程，取决于它的实际使用，例如不可能同添加一个和删除这个，所以它只能是单线程的。所以，这个新标准并没有改变单线程的本质。原文博客地址：https://finget.github.io/2018/05/21/async/ 异步什么是单线程，和异步有什么关系什么是event-loop 是否用过jQuery的Deferred Promise的基本使用和原理介绍一下asyn...

andot 2019-08-23 13:46 评论0 收藏0
JavaScript从初级往高级走系列————Virtual Dom

摘要：当中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如。则就叫称为重绘。原文博客地址：https://finget.github.io/2018/05/22/virtualDom/ 什么是虚拟DOM 用JS模拟DOM结构 DOM变化的对比，放在JS层来做（图灵完备语言）提高重绘性能重绘和回流页面渲染过程：showImg(https://seg...

tinyq 2019-08-23 13:45 评论0 收藏0
JavaScript从初级往高级走系列————ES6

摘要：采用二八定律，主要涉及常用且重要的部分。对象是当前模块的导出对象，用于导出模块公有方法和属性。箭头函数函数箭头函数把去掉，在与之间加上当我们使用箭头函数时，函数体内的对象，就是定义时所在的对象，而不是使用时所在的对象。 ES6 原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/ 现在基本上开发中都在使用ES6，浏览器环境...

孙淑建 2019-08-23 13:45 评论0 收藏0
程序员若不想吃青春饭，就得不断进阶提升

摘要：程序员到底是不是吃青春饭首先要明白什么是青春饭，青春饭的标记是什么你这个行业或者是职业强调的是体力还是经验和人脉如果你这个行业强调的是体力的话，那么这就是青春饭，比如快递员工地搬砖人员等等。 ...

ygyooo 2021-11-11 16:55 评论0 收藏0