完整学习路径
最后一个课程，本质上可以模拟实现一个自己搭建的vue框架，包含了数据的监听与双向数据绑定，生命周期的创建，以及一些v-开头的自定义指令的实现。具体怎么操作的呢，接下来一步步整理。
app根节点里的内容
在index.html里，调试与运行咱自己的miniVue，包含：
1、获取{{}}里的值，如data里的name
2、各种自定义的v-开头的指令
3、有input框，测试双向数据绑定
4、有一个button，点击数据加1，测试是否实现了数据改变视图的功能
<div id="app">
{{a.b.c.d}} a.b.c.d的值
<hr />
你好呀 {{name}}！
<h2 class="title" v-if="isShowType1">hello {{name}}</h1>
<h2 class="title" v-show="isShowType2">hello world</h1>
<input type="text" v-model="a.b.c.d">
<input type="text" v-model="name">
<button onclick="add()">按我加1</button>
</div>
首页miniVue里的内容
实际的具体使用实例，有el挂载点，data数据对象，以及watch监听数据被改变时进行的一些操作，以及生命周期（未实现）
let vm = new miniVue({
el:'#app',
data:{
isShowType1: true,
isShowType2: true,
name: 'rita',
page: 'index',
a:{
b:{
c:{
d: 999
}
}
}
},
watch:{
name(){
console.log('watch: 正在试图改变 name属性');
}
},
})
一些有用的算法
getVueVal(obj, key)可以访问obj里面key属性的值，以及包含点语法时的值，如obj.a.b.c
// 获取data中a.b.c的值，点语法
getVueVal(vue, exp) {
let val = vue
exp = exp.split('.')
exp.forEach(v => {
val = val[v]
})
return val
}
setVueVal(obj, key, newVal)可以设置obj里面key的值，以及设置包含点语法时的值，如obj.a.b.c = newVal
// 设置a.b.c的值
setVueVal(vue, exp, newVal) {
let val = vue
exp = exp.split('.')
exp.forEach((k, i) => {
// 判断是否是点语法里的最后一个值 a.b.c里的c
if (i < exp.length - 1) {
val = val[k]
} else {
val[k] = newVal
}
})
return val
}
vue的模板编译核心：Compile类
constructor(el, vue) {
// vue实例
this.$vue = vue
// 获取挂载点
this.$el = document.querySelector(el)
// 转换与编译
if (this.$el) {
// 调用转换函数
let $fragment = this.node2Fragment(this.$el)
// 编译
this.compile($fragment)
// 上树
this.$el.appendChild($fragment)
}
}
如何实现v-开头的指令？
1、拿到属性列表，这里是数组，不是字符串
let nodeAttr = node.attributes
2、类数组对象变为数组
Array.prototype.slice.call(nodeAttr).forEach(attr => {}）
3、解析指令
attr => 拿到 v-if = 'isShow'
attr.name..substring(2) => 拿到 v-if 后面的 if
4、vue指令都是v-开头的
if (aName.indexOf('v-') === 0) { 内部进行switch-case的查找与判定 }
// 处理标签 解析v-指令
compileElement(node) {
// 是属性列表 不是字符串
let nodeAttr = node.attributes
// 类数组对象变为数组
Array.prototype.slice.call(nodeAttr).forEach(attr => {
// 拿到 class='title'、v-if = 'isShow'
let aName = attr.name
let aValue = attr.value
let dir = aName.substring(2) // 拿到 v-if 后面的 if
// vue指令都是v-开头的
if (aName.indexOf('v-') === 0) {
let val = this.getVueVal(this.$vue, aValue)
// 在这里进行指令的处理
switch (dir) {
case 'model':
// v-if='isShow'为例子，aValue=if, val=isShow
console.log('发现了model指令: ', aValue, val);
break;
case 'for':
console.log('发现了for指令: ', aValue, val);
break;
case 'show':
console.log('发现了show指令: ', aValue, val);
break;
case 'if':
console.log('发现了if指令: ', aValue, val);
break;
}
}
})
}
如何实现v-model的双向数据绑定？
case 'model':
// v-if='isShow'为例子，aValue=if, val=isShow
console.log('发现了model指令: ', aValue, val);
// 数据改变 模板改变
new Watcher(this.$vue, aValue, value => {
node.value = value
})
let v = this.getVueVal(this.$vue, aValue)
node.value = v
// 模板改变 数据也要改变
node.addEventListener('input', e => {
let newVal = e.target.value
this.setVueVal(this.$vue, aValue, newVal)
v = newVal
})
break;
如何实现v-if与v-show？
- v-if的底层原理是设置style上的display属性为none
- v-show的底层原理是设置style上的visibility属性为hidden
case 'show':
console.log('发现了' + dir + '指令: ', aValue, val);
if (val) {
node.style.visibility = 'visible'
} else {
node.style.visibility = 'hidden'
}
break;
case 'if':
console.log('发现了' + dir + '指令: ', aValue, val);
if (val) {
node.style.display = 'block'
} else {
node.style.display = 'none'
}
break;
