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(obj.name)
使用with(obj){
console.log(name)
}

  <div id="app">
     <p>{{price}}</p>
   </div>
   <script>
      var vm = new Vue({
            el:"#app",
            data:{
                price:100
            }    
     })
     //以下手写render函数就相当于把模板转化为js      render函数的实操
     function render(){
         with(this){ //this 就是 vm
            return _c(//应该是但是有with就省了 vm._c
               'div',// 创建了div函数 属性id = app 子元素有个p标签 创建了一个_c创建一个dom标签_v创建一个文本节点的 _s就是我们说的tostring把vm.price变成字符串然后变成文本节点 在变成标签 vm.price可以向上看响应式Object.definproprty这个函数的原理 就是data响应式的原理
               {
                 attrs:{'id' : 'app'}
               },
               [
                 _c('p',[_v(_s(price))])
               ]
            )
          }
      }
   </script>

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中