vue源码分析（八）：双向数据绑定v-model
2020-09-05 本文已影响0人
姜治宇
有了前面的基础，v-model其实很容易实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{name}}</p>
<input type="text" v-model="name" />
</div>
</body>
</html>
<script src="./myvue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
name:'jack',
}
})
</script>
实现思路：
1、解析element的属性节点（v-model="name"）
if(dir.indexOf('model') === 0){
...
}
2、将input的value设置为vm.data里面的name值
if(dir.indexOf('model') === 0){
node.value = this.getVMVal(exp) //exp就是name
}
3、增加input事件监听，当获取了e.target.value新值时，修改vm.data.name。
if(dir.indexOf('model') === 0){
//双向数据绑定
//1.将input的value设置为当前data的name值
node.value = this.getVMVal(exp)
//2.绑定input事件
node.addEventListener('input',(e)=>{
var newval = e.target.value;
//修改data的name值
this.$vm._data[exp] = newval
},false)
}
4、增加watcher监听。
这个是容易被忽视的地方。
因为双向数据绑定是model和view双向的，通过第三步addEventListener可实现view->model；而model->view的过程，我们还需要增加数据监听watcher，只是初始化时设置input输入框的value是不够的。
new Watcher(this.$vm,exp,(newVal,oldVal)=>{
console.log('执行回调函数',newVal,oldVal)
node.value = newVal
})
5、完整代码。
function Vue(options){
this.$options = options
var data = this._data = this.$options.data
//数据代理
Object.keys(data).forEach(key=>{
this._proxy(key)
})
//数据劫持
observe(data)
//模板解析
this.$compile = new Compile(options.el,this) //模板解析
}
Vue.prototype = {
_proxy(key){
Object.defineProperty(this,key,{
configurable:false,
enumerable:true,
get(){
return this._data[key]
},
set(newVal){
this._data[key] = newVal
}
})
}
}
function Compile(el,vm){
this.$vm = vm
this.$el = document.querySelector(el)
if(this.$el){
this.$fragment = this.node2Fragment(this.$el) //将节点转到fragment处理
this.init() //开始处理
this.$el.appendChild(this.$fragment) //塞回原位
}
}
Compile.prototype = {
//将#app里面的节点都转到文档碎片中
node2Fragment(el){
var fragment = document.createDocumentFragment()
var child = null
while(child = el.firstChild) {
fragment.appendChild(child)
}
return fragment
},
//处理碎片中的信息
init(){
this.compileElement(this.$fragment)
},
//正则匹配
compileElement(el){
var childNodes = el.childNodes;
[].slice.call(childNodes).forEach(node=>{
var text = node.textContent // 获取文本信息
var reg = /\{\{(.*)\}\}/
//这里增加指令的处理
if(node.nodeType === 1){
//如果是元素节点
this.compile(node)
} else if(node.nodeType === 3 && reg.test(text)) {
this.compileText(node,RegExp.$1) //更新视图动作
//订阅更新视图函数
/*
dep.register(RegExp.$1,()=>{ //注册的是key是a.b
//如果data发生了变化，需要再次调用this.compileText这个函数来更新视图
this.compileText(node,RegExp.$1)
})
*/
//引入watcher对象
new Watcher(this.$vm,RegExp.$1,(newVal,oldVal)=>{ //this.cb.call(this.vm,newVal,oldVal)//更新视图操作
if(newVal !== oldVal) {
node.textContent = newVal //更新为最新值
}
})
}
if(node.childNodes && node.childNodes.length) {
//递归
this.compileElement(node)
}
})
},
//处理元素节点
compile(node){
var nodeAttrs = node.attributes; // 获取元素节点的所有属性，伪数组
[].slice.call(nodeAttrs).forEach(attr=>{
var attrName = attr.name;//获取属性名
if(attrName.indexOf('v-') === 0){//判断是否是指令
var exp = attr.value; //获取属性值，也就是触发的方法名
var dir = attrName.substring(2) // 截取字符串,得到on:click
if(dir.indexOf('on') === 0){ //判断事件指令
var eventType = dir.split(':')[1]; //获取事件类型
var fn = this.$vm.$options.methods && this.$vm.$options.methods[exp];// 获取函数
if(eventType && fn) {
node.addEventListener(eventType,fn.bind(this.$vm),false) // 注意fn里面的this指向
}
} else if(dir.indexOf('bind') === 0) { // 一般指令
var dirType = dir.split(':')[1] // 获取指令类型class
if(dirType === 'class') {
var oldClassName = node.className; //原来的class类
var newClassName = '' //动态class类
var classObj = eval('(' + exp + ')'); //解析为object对象
for(var key in classObj) { //遍历对象，如果value为true追加class名，false不追加
if(classObj[key]) {
newClassName += ' ' + key
}
}
node.className = oldClassName + newClassName // 设置className
}
} else if(dir.indexOf('model') === 0){ //1.捕获v-model的值
//双向数据绑定
//2.将input的value设置为当前data的name值
node.value = this.getVMVal(exp)
//3.绑定input事件
node.addEventListener('input',(e)=>{
var newval = e.target.value;
//修改data的name值
this.$vm._data[exp] = newval
},false)
//4.增加监听
new Watcher(this.$vm,exp,(newVal,oldVal)=>{
console.log('执行回调函数',newVal,oldVal)
node.value = newVal
})
}
node.removeAttribute(attrName) // 从chrome控制台的Elements看文档结构，发现没有v-这样的属性（指令），所以需要处理完去掉
}
})
},
//用vm.data信息，替换大括号的name
compileText(node,exp){
node.textContent = this.getVMVal(exp)
},
//处理层级问题
getVMVal(exp){ // a.b.c
var val = this.$vm._data
if(exp.indexOf('.') !== -1) {
var arr = exp.split('.') //["a", "b", "c"]
arr.forEach(k=>{
//debugger
val = val[k] // 层级递进
})
return val
} else {
return val[exp]
}
}
}
//新增部分
function observe(data){
//对data进行defineProperty处理，嵌套的数据要用递归
if(!data || typeof data!=='object'){//递归的退出条件
return;
}
Object.keys(data).forEach(key=>{
defineReactive(data,key,data[key])//对data里面的每一个key进行定义
})
}
function defineReactive(data,key,val){
var dep = new Dep()
observe(val)//先执行递归，确保嵌套对象的key都可以被定义
Object.defineProperty(data,key,{
enumerable:true,
configurable:false,
get(){
console.log('get操作：',key,'===>',val)
/*
dep.register(key,()=>{
console.log('更新操作')
})
*/
if(Dep.target) { //如果Dep.target有了Watcher，就存入到dep的容器里面
dep.register(Dep.target)
}
return val
},
set(newVal){
console.log('set操作：',key,'===>',newVal)
val = newVal //修改为最新值
//触发更新视图函数
dep.emit(key) // 这里的key是b，而不是a.b
}
})
}
//引入Watcher
function Watcher(vm,exp,cb){
this.vm = vm; //vue对象
this.exp = exp; //正则匹配的大括号表达式
this.cb = cb; // 回调函数，也就是待执行的更新视图操作
this.value = this.getValue() //在初始化的时候调用，触发defineProperty里面的get
}
Watcher.prototype.getValue = function(){
Dep.target = this //Dep.target是一个临时变量
var newVal = this.getVMVal()
Dep.target = null
return newVal
}
Watcher.prototype.getVMVal = function(){
var val = this.vm._data
if(this.exp.indexOf('.') !== -1) {
var arr = this.exp.split('.') //["a", "b", "c"]
arr.forEach(k=>{
//debugger
val = val[k] // 层级递进
})
return val
} else {
return val[this.exp]
}
}
Watcher.prototype.update = function(){
//获取新值
let newVal = this.getValue()//这里会触发defineProperty的get
let oldVal = this.value
if(newVal !== oldVal){
this.value = newVal
this.cb.call(this.vm,newVal,oldVal)//更新视图操作
}
}
//引入观察订阅模式
function Dep(){
this.subs = [] //容器，
}
Dep.prototype.register = function (obj) {
if(Dep.target){
this.subs.push(obj) //丢入容器的是Watcher对象，在Watcher实例化的时候丢入
}
}
Dep.prototype.emit = function () {
this.subs.forEach(obj=>{ //将容器中的Watcher对象遍历，顺序执行
obj.update()
})
}
最后做一下测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{name}}</p>
<input type="text" v-model="name" />
<button v-on:click="changeName">修改</button>
</div>
</body>
</html>
<script src="./myvue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
name:'jack',
},
methods:{
changeName(){
this.name = 'tom'
}
}
})
</script>
大家可以屏蔽一下第四步试试，当点击按钮修改了name，input输入框的value是无法更新的。
