VUE 笔记 ilovecoding 230 响应式原理-依赖技术的分析和学习

面试题

  • 如何理解 Vue 生命周期
  • 如何进行非父子组件通信
  • Vue 响应式原理
    • 不要认为数据发生改变，界面跟着更新是理所当然的。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <div>
      <ol>
        <li>
          <p>app.message修改数据，Vue内部是如何监听message数据的改变</p>
          <p>Object.defineProperty -> 监听对象属性的改变</p>
        </li>
        <li>
          <p>当数据发生改变，Vue是如何知道要通知哪些人，界面发生刷新</p>
          <p>发布订阅者模式</p>
        </li>
      </ol>
    </div>
    <div id="app">
      {{message}}
      {{message}}
      {{message}}
      {{name}}
    </div>
    <script>
      const obj = {
          message: '心有猛虎，细嗅蔷薇。',
          name: '墨倾池'
        }
        Object.keys(obj).forEach(key => {
          let value = obj[key]
          Object.defineProperty(obj, key, {
            set(newValue) {
              console.log('监听 ' + key + ' 改变')
              // 告诉谁了？谁用告诉谁？谁在用了？
              // 根据解析html代码，获取到哪些人有用属性
              // 张三/李四/王五
              value = newValue
            },
            get() {
              console.log('获取 ' + key + ' 对应的值')
              // 张三：get -> updae
              // 李四：get -> udpate
              // 王五：get -> update
              return value
            }
          })
        })
        // 发布者订阅者模式
        // 发布者
        class Dep {
          constructor() {
            this.subs = []
          }
          addSub(watcher) {
            this.subs.push(watcher)
          }
          notify() {
            this.subs.forEach(item => {
              item.update()
            })
          }
        }
        // 订阅者
        class Watcher {
          constructor(name) {
            this.name = name
          }
          update() {
            console.log(this.name + ' 发生update')
          }
        }
        const dep = new Dep()
        const w1 = new Watcher('张三')
        dep.addSub(w1)
        const w2 = new Watcher('李四')
        dep.addSub(w2)
        const w3 = new Watcher('王五')
        dep.addSub(w3)
    </script>
    <script src="../../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '心有猛虎，细嗅蔷薇。',
          name: '墨倾池'
        }
      })
    </script>
  </body>
</html>
posted @ 2023-04-08 21:35  君子键  阅读(24)  评论(0)    收藏  举报