跟着B站学VUE2源码之第五课:指令和生命周期

完整学习路径

最后一个课程,本质上可以模拟实现一个自己搭建的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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容