Vue

by Damian Dulisz

HTML

<div id="app">
  {{ count }}
  <button @click="count++">++</button>
</div>

Vue

let currentInstance = null

Vue.mixin({
  beforeCreate() {
    currentInstance = this
  },
  created() {
    currentInstance = null
  }
})

function onMounted(fn) {
  const vm = currentInstance
  vm && vm.$on('hook:mounted', () => {
    fn.call(vm, vm)
  })
}

const watcher = new Vue({})
const noop = () => {}

function watch(getter, cb, options) {
  watcher.$watch(getter, cb || noop, options)
}

function useFoo() {
  const state = Vue.observable({
    count: 0
  })

  watch(() => {
    console.log(`count is: `, state.count)
  })

  watch(() => state.count + 1, plusOne => {
    console.log(`plusOne is: `, plusOne)
  })

  onMounted(() => {
    console.log('mounted!')
  })

  return { count: state.count }
}

const app = new Vue({
  el: '#app',
  data() {
  	const { count } = useFoo()
  
    return {
      count
    }
  }
})