一,使用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的生命周期