MVVM 和 VUE
一，使用jquery和使用vue的区别
二，对MVVM的理解
三，vue中如何实现响应式
四，vue如何解析模版
五，vue整个实现流程
一，使用jquery和使用vue的区别
jquery实现todo-list
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todo-list-jquery</title> </head> <body> <div> <input type="text" id="txt-title"> <button id="btn-submit">submit</button> </div> <ul id="ul-list"></ul> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> var $txtTitle = $('#txt-title'); var $btnSubmit = $('#btn-submit'); var $ulList = $('#ul-list'); $btnSubmit.click(function() { var title = $txtTitle.val(); if (!title) { return; } var $li = $('<li>' + title + '</li>'); $ulList.append($li); $txtTitle.val(''); }) </script> </body> </html>
vue实现todo-list
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todo-list-vue</title> <script src="./vue-2.5.13.js"></script> </head> <body> <div id="app"> <div> <input v-model="title"> <button v-on:click="add">submit</button> </div> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { title: '', list: [], }, methods: { add: function() { if (this.title) { this.list.push(this.title); this.title = ''; } } } }) </script> </body> </html>
jquery和vue两者的区别：
数据和视图的分离-解耦（开放封闭原则）
以数据驱动视图-只关心数据变化，DOM操作被封装
二，对MVVM的理解
1，先说下MVC：
M-Model 数据
V-VIew 视图、界面
C-Controller 控制器、逻辑处理
两种场景：
2，MVVM
Model-模型、数据
View-视图、模版（视图和模型是分离的）
ViewModel-连接Model和View，“桥”
3，关于ViewModel
MVVM不算是一种创新-是微创新
但其中的ViewModel是一种创新
真正结合前端场景应用的创建
4，MVVM框架的三大要素（实现的三要素）
响应式：vue如何间听到data的每个属性变化？
模版引擎：vue的模版如何被解析，指令如何处理？
渲染：vue的模版如何被渲染成html？以及渲染过程
三，vue中如何实现响应式
1，什么是响应式
修改data属性之后，vue立刻监听到
data属性被代理到vm(this)上，data的属性，同时也变成了this的属性
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-demo</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <p>{{name}}</p> <p>{{age}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ name:'zs', age:20 } }) console.log(vm.age) </script> </body> </html>
在控制台修改vm.age 或者vm.name，立刻会被监听渲染出来
2，Object.defineProperty：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
例子：
var obj = {}; var _name = 'zs'; Object.defineProperty(obj,'name',{ get:function(){ console.log('get',_name);//监听 return _name; }, set:function(newVal){ console.log('set',newVal);//监听 _name = newVal; } });
3，模拟实现（监听+代理）
var vm = {}; var data = { name: 'zs', age: 20 }; var key, value; for (key in data) { // 命中闭包，新建一个函数，保证key的独立的作用域 (function(key) { Object.defineProperty(vm, key, { //data属性代理到vm上 get: function() { console.log('get', data[key]); //监听 return data[key]; }, set: function(newVal) { console.log('set', newVal); //监听 data[key] = newVal; } }) })(key) }
看下控制台中，此时打印的vm
四，vue如何解析模版
1，模版是什么
本质：字符串
有逻辑，如v-if,v-for等
与html格式很像，但有很大区别（html静态的，没有逻辑）
要转换为html来显示
模版最终必须要转换成js代码，原因如下：
有逻辑（v-if,v-for)，前端必须用js才能实现（图灵完备）
转换为html渲染页面，前端必须用js才能实现
因此，模版最终要转换成一个js函数（render函数，即渲染函数）
2，render函数
render函数-with的用法（with可以了解下实现，但是实际开发中最好不要用，问题比较多）
先看下with的简单用法：
var obj = { name: 'xx', age:20, getAddress:function(){ console.log('bj'); } } // 不用with function fn(){ console.log(obj.name); console.log(obj.age); obj.getAddress(); } fn() // 使用with function fn1(){ with(obj) { console.log(name); console.log(age); getAddress(); } } fn1()
3，render函数
模版：
<div id="app"> <p>{{price}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ price:100 } }) </script>
render函数如下：
// 以下是手写的 render 函数 使用 with ，代码简洁一些 function render() { with(this) { return _c( 'div', { attrs: { "id", "app" } }, [ _c('p', [_v(_s(price))]) ] ) } } // 不用 with 的改写的 render 函数 function render1() { return vm._c( 'div', { attrs: { "id", "app" } }, [ vm._c('p', [_vm.v(vm._s(vm.price))]) ] ) } // 模版中所有信息都包含在了 render 函数中 // this === vm // price 即 this.price 即vm.price, 即 data 中的 price // _c 即 this._c , 即 vm._c
看下控制台：
问题：
从哪里可以看到render函数？
复杂一点的例子，render函数是什么样子的？
v-if, v-for, v-on都是怎么处理的？
回顾之前的demo
<div id="app"> <div> <input v-model="title"> <button v-on:click="add">submit</button> </div> <ul> <li v-for="item in list">{{item}}</li> </ul> </div>
对应的render函数：（通过在vue-2.5.13.js源码中 console.log（code.render）得出）
with(this){ return _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( 'ul', _l( (list),function(item){ return _c( 'li', [ _v( _s(item) ) ] ) } ） ) ] ) }
根据todo-list demo的render函数：
v-model是怎么实现的？：双向数据绑定，既有get，又有set
v-on:click是怎么实现的？：渲染时绑定click事件
v-for是怎么实现的？：对数组进行遍历，li标签，最后归结为数组，作为ul的子元素
模版生成html
vm.c其实就相当于snabbdom中的h函数
render函数执行之后，返回的是vnode
vm._update(vnode) { const prevVnode = vm._vnode; vm._vnode = vnode; if (!prevVnode) { // 初次渲染 vm.$el = vm.__patch__(vm.$el, vnode); } else { // re-render vm.$el = vm.__patch__(prevVnode, vnode); } } function updateComponent() { // vm._render即上面的render函数，返回vnode vm._update(vm._render()) } // updateComponent实现了vdom的patch // 页面首次渲染执行updateComponent（执行第一个patch） // data中每次修改属性，执行updateComponent，修改data，set中可以执行updateComponent
vue如何解析模版：
模版：字符串（本质），有逻辑，嵌入js变量...
模版必须转换为js代码（有逻辑，渲染html，js变量）前端中，只有js才能处理逻辑和渲染html等
render函数: with语法，就是snabbdom里h函数的样子
render函数执行是返回vnode
updateComponent 首次渲染，非首次渲染（data属性修改）
五，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方法监听到（后面详细讲）
执行updateComponent，会走到vdom的patch方法
patch将vnode渲染成DOM，初次渲染完成
疑问：
为何要监听get，直接监听set不行吗？
data中有很多属性，有些被用到，有些可能不被用到
被用到的会走到get，不被用到的不会走到get
未走到get中的属性，set的时候我们也无须关心
避免不必要的重复渲染
第四步：data属性变化，触发rerender
修改属性，被响应式的set监听到
set中执行updateComponent (这里是异步的）
updateComponent重新执行vm._render()
生成的vnode和prevVnode，通过patch进行对比
渲染到html中
附：Vue的生命周期
vue调试工具vue-devtools安装及使用
