text VUE.JS Deep Dive

Posted 2021-05-01

<div id="count"></div>
<button onclick="state.count++">++</button>

<script>
let currentEffect

class Dep {
  constructor() {
    this.subscribers = new Set()
  }

  depend() {
    if (currentEffect) {
      this.subscribers.add(currentEffect)
    }
  }

  notify() {
    this.subscribers.forEach(sub => {
      sub()
    })
  }
}

function effect(runner) {
  currentEffect = runner
  runner()
  currentEffect = null
}

// ---

function observable(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    const dep = new Dep()

    Object.defineProperty(obj, key, {
      get() {
        dep.depend()
        return value
      },
      set(newValue) {
        value = newValue
        dep.notify()
      }
    })
  })

  return obj
}

const state = observable({
  count: 0
})

effect(() => {
  document.getElementById('count').textContent = state.count
})

state.count++
</script>

https://github.com/nuxt/nuxt.js/issues/2680

https://stackoverflow.com/questions/46805455/how-use-own-js-as-plugin-using-nuxt-js

http://vuejs-templates.github.io/webpack/