MVVM 和 VUE

MVVM是一个设计模式

如何理解MVVM template里面的是 view data 是 model vm是viewmodel 也就是Vue var vm = new Vue({ el:’#app’ data:data, methods:{ add:funtion(){ this.list.push(this.title) } } }) vm就是一个桥 有这个桥就可以彻底分离 view model vm链接他们两个 以vm 为中介 view通过事件绑定操作model model 通过数据绑定来操作view MVVM框架三要素 响应式 Vue是如何根据数据源的改变改变视图的 他是怎么监视的 模板引擎 Vue的指令是在HTML中如何解析的 渲染 Vue模板如何变成HTML 以及渲染过程 以及data改变后重新渲染

MVC是后端的开发模式 model 数据源 view 视图 controller控制器是能修改数据视图的 用户点击view中的按钮 到控制器 到数据源 到视图改变 也可以直接操作控制器 Jquery和使用框架的区别

 通过jQuery实现点击按钮 添加todo-list
 页面上设置 一个input 一个button 一个ul
 然后在jQuery中获得输入框的val 把val 给新建的li标签里面 当点击按钮时ul append  li 并清空input 这样就可以实现点击添加list
 Vue实现todo-list 给input绑定一个 v-model = ‘title’
 ul中li循环 list 数组 每次输入内容 内容push 到list中 其中的操作并没有更改dom结构 但是jQuery的append 绝对是更改了dom结构的
 1.数据和视图的分离
   视图就是HTML结构 juery的append等对dom节点操作的 说明数据和视图没有分离 违背了开放封闭原则
 2.以数据驱动视图
    Vue就是这样的 通过改数据 由框架根据数据的修改自动帮我们把视图改了
    DOM操作被封装

Vue如何实现响应式 什么是响应式 修改data属性后 Vue立刻监听到 为什么 例如：var obj = { name:‘张三’, age:25 } console.log(obj) 以上代码 在控制台打印obj后 在控制台修改 的时候 console.log()不会执行了 因为没有监听 Vue中是通过Object.definproprty这个核心函数实现的 var obj ={} var name = ‘张三’ Object.definproprty(obj,‘name’,{ get:function(){ console.log(‘get’,name)//监听 return name } set:fucntion(newval){ console.log(‘set’,newval)//监听 name = newVal } }) 此时在控制台如果修改name 那么就会被监听到 data属性被代理到vm上 也就是this上 为什么 是通过一个自执行函数传递过去data中的每个key值 通过Object.definproprty函数监听

Vue如何解析模板 模板是什么? 对Vue来说 模板本质就是字符串形式存在 有逻辑 如 v-if v-for 等 与HTML格式很像 但是有很大区别 本质上HTML没有逻辑是静态的 但是模板最终还是要转化为HTML格式来显示通过转化为js代码 因为有逻辑必须用js才能实现(图灵完备语言) 因此 模板最终要转换为一个js函数(render函数) render函数 with语法Vue中有使用但是在开发中尽量不要用只是了解下 如果有一个obj对象里面有一个name属性 普通的console.log() 使用with(obj){ console.log(name) }

  
{{price}}

   
   

render函数与vdom render函数实现类似vdom的patch函数的diff算法对比vm._update(vnode){ const prevVnode = vm._vnode vm._vnode = vnode if(!prevVnode){ vm.$el = vm._patch_(vm.$el,vnode) }else{ vm.$el = vm._patch_(prevVnode,vnode) } } function updataComponent(){ vm._render 即上面的 render 函数 返回vnode vm._update(vm._render()) } 页面渲染执行上面的函数 data每次修改也会执行这个函数 这个函数是render函数 模板 : 是字符串 有逻辑 嵌入js变量 模板必须转化为js代码 因为前端只有js有逻辑 可以渲染HTML 而且模板中还有js变量 render函数执行返回vnode 执行 updatecomponent函数时新旧 vnode会对比

Vue的整个实现流程 第一步 解析模板成render函数 with的用法 模板中所有的信息都被render函数包含 模板中用到的data中 的属性 都变成的js变量 模板中的v-model v-for v-on都变成了js逻辑 render函数返回vnode 第二步 响应式开始监听 通过Object.defineProperty 将data中的属性代理到vm上 第三步 首次渲染 显示页面 且绑定依赖 初次渲染 执行updatecomponent 执行vm._render() 执行render函数会访问 vm.list 和 vm.title 会被响应式的get方法监听到 为什么监听get? data中有很多属性 有些会被用到 有些不会被用到 被用到的会走get 不会被用到的不会走get 为走到get中的属性 set的时候我们也无需关心 避免不必要的重复渲染 执行updatecomponent 会走到vdom的patch方法 .patch将vnode渲染成DOM 初次渲染完成 第四步 data属性变化 触发render函数 修改属性被响应式的set监听到 set中执行updatComponent updateComponent重新执行vm._render() 生成vnode 和 prevVnode 通过patch进行对比 渲染到HTML中

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!