手写实现vue的双向绑定

梦里yf

已于 2024-03-02 12:24:55 修改

阅读量465

点赞数 12

文章标签： vue.js javascript ecmascript

于 2024-03-02 12:03:40 首次发布

本文链接：https://blog.csdn.net/m0_64717348/article/details/136412908

版权

文章详细解释了Vue.js中的响应式原理，涉及Observer函数监控数据变化、Compile函数解析模板并初始化渲染，以及Watcher订阅者确保视图与数据同步更新。还提到了Vue的双向绑定机制和异步更新策略的简化实现。

摘要由CSDN通过智能技术生成

1.index.html部分的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin-bottom: 50px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="top">
      <div>作者：{{name}}</div>
      <input type="text" v-model="name" placeholder="输入名字"><span>{{name}}</span>
    </div>
    <div>
      <div>更多：{{more.like}}</div>
      <input type="text" v-model="more.like" placeholder="输入更多"><span>{{more.like}}</span>
    </div>
    
  </div>

  <script src="./vue.js"></script>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: '梦里',
        more: {
          like: '篮球'
        },
      }
    })

    console.log(vm)
  </script>
</body>
</html>

2.vue.js的代码

class Vue {
  constructor(obj_instance) {
    this.$data = obj_instance.data;
    //调用数据监听函数Observer
    Observer(this.$data)   //这一步执行的时候，所有数据的get()都会被触发
    Compile(obj_instance.el,this)  //模板解析器
  }
}


//数据劫持——监听实例里的数据
function Observer(data_instance) {
  if(!data_instance || typeof data_instance !== 'object') return   //递归结束的出口
  //创建收集订阅者数组的实例
  const dependency = new Dependency()
  Object.keys(data_instance).forEach(key => {
    let value = data_instance[key];

    Observer(value);  //递归遍历所有子属性
    //使用Object.defineProperty()来对数据进行监听
    Object.defineProperty(data_instance,key,{
      enumerable: true,  //属性可枚举
      configurable: true,  //属性描述符可以被改变
      get() {
        Dependency.temp && dependency.addSub(Dependency.temp)  //向订阅者数组中添加订阅者
        return value
      },
      set(newValue) {
        value = newValue;
        Observer(newValue)  //如果不加，那么当给某个值设置的属性值为对象的时候那么这个对象就不会有getter和setter 
        dependency.notify()  //通知订阅者
      }
    })
  })
}


//HTML模板解析——替换DOM
//添加订阅者，我的模版解析只需要解析一遍，因为解析一遍过后相应的位置上就已经添加上订阅者了，所以当数据变化的时候订阅者就可以在相应的位置上做出更改
function Compile(element,vm) {
  vm.$el = document.querySelector(element);
  //创建文档碎片之后一次性的挂载到页面上，速度更快
  let fragment = document.createDocumentFragment()
  let child;

  while(child = vm.$el.firstChild) {
    fragment.appendChild(child)
  }
  fragment_compile(fragment)


  //替换文档碎片内容
  function fragment_compile(node) {
    //正则表达式
    const pattern = /\{\{\s*(\S+)\s*\}\}/;
    //如果判断的结果为文本，那就进行这样的处理
    if(node.nodeType === 3) {  
      const xxx = node.nodeValue
      //匹配{{xxx}}的数据
      const result_regex= pattern.exec(node.nodeValue)
      if(result_regex) {
        const result = result_regex[1].split('.').reduce((acc,curr) => {
          return acc[curr]
        },vm.$data)
        //将{{}}去除也就是 {{name}} => 梦里,这个时候是替换文档内容的时候，也正是这个时候去创建订阅者
        node.nodeValue = xxx.replace(pattern,result)
        //创建订阅者,以后数据发生变化就会进行更新相应的节点
        new Watcher(vm,result_regex[1],newValue => {
          node.nodeValue = xxx.replace(pattern,newValue)
        })
      }
      return
    }
    //如果判断的结果为Input
    if(node.nodeType === 1 && node.nodeName === 'INPUT') {
      //获取节点的属性
      const attr = Array.from(node.attributes)
      attr.forEach(item => {
        if(item.nodeName === 'v-model') {
          const vaule = item.nodeValue.split('.').reduce((acc,curr) => {
            return acc[curr]
          },vm.$data)
          node.value = vaule
          //创建订阅者，这样以后数据发生变化的时候input框中的数据也会发生变化
          new Watcher(vm,item.nodeValue,newValue => {
            node.value = newValue
          })
          //添加input事件，为了实现试图改变的时候数据也改变
          node.addEventListener('input',e => {
            //['more','like']
            const arr1 = item.nodeValue.split('.')
            //['more','like'] => ['more']
            const arr2 = arr1.slice(0,arr1.length-1)
            const final = arr2.reduce((acc,curr) => acc[curr],vm.$data)
            final[arr1[arr1.length-1]] = e.target.value
          })
        }
      })
    }
    node.childNodes.forEach(child => fragment_compile(child))
  }

  //将文档碎片应用于页面
  vm.$el.appendChild(fragment)
} 


//依赖——收集和通知订阅者
class Dependency {
  constructor() {
    //订阅者数组
    this.subscribers = []
  }

  //添加订阅者
  addSub(sub) {
    this.subscribers.push(sub)
  }

  //通知订阅者
  notify() {
    this.subscribers.forEach(sub => {
      sub.update()
    })
  }
}


//订阅者
class Watcher {
  constructor(vm,key,callback) {
    this.vm = vm
    this.key = key
    this.callback = callback
    //临时属性
    Dependency.temp = this
    //触发getter,这里的作用只是为了触发gettre,因此不需要保存内容
    key.split('.').reduce((acc,curr) => {
      return acc[curr]
    },vm.$data)
    Dependency.temp = null   //为了防止订阅者数组被多次添加到数组中
  }

  update() {
    const value = this.key.split('.').reduce((acc,curr) => {
      return acc[curr]
    },vm.$data)
    this.callback(value)
  }
}

总结：
1.面试时如何回答vue的响应式原理/双向绑定原理
回答：首先vue采用的是MVVM的架构模式，双向绑定也就是指当数据发生变化是视图会跟着变化，相反视图发生变化的时候相应的数据也跟着发生变化。具体的实现原理如下：首先需要一个Observer()函数，该函数会对数据对象进行递归遍历，包括子属性对象的属性，并为他们添加上setter和getter。其次需要一个Compile()函数，它会将模版中的变量替换成数据，然后初始化渲染页面，并且将每个对应的节点添加订阅者。最后需要一个Watcher订阅者，它会在自身实例化时主动的触发一次getter向订阅者数组中添加自己，当属性值有变化时会触发setter，set函数中就会触发相应的订阅者去进行更新。

2.一些细节的问题：
首先watcher中的update()更新函数并不是这么简单，一方面vue默认使用的是异步更新策略，因此watcher中会有进行异步处理的相关操作（也就是nextTick）;另update()更新函数要使用diff算法进行虚拟DOM的对比。所以本次只是简单的实现，具体nextTick的原理和diff算法可以看我的另外两篇相关的文章