Knockout-like functional syntax for Vue.js. Observables use all of Vue's reactivity, therefore they can trigger template updates, watchers, etc.
import { observable } from 'vue-observables'
const foo = observable(1)
console.log(foo()) // 1
foo(2)
console.log(foo()) // 2
Technically not needed, as Vue tracks deep reactivity for refs, but is provided for symmetry with Knockout.
import { observableArray } from 'vue-observables'
const foo = observableArray([1])
console.log(foo()) // [1]
foo().push(2)
console.log(foo()) // [1, 2]
import { computed } from 'vue-observables'
// ...
const foo = computed(() => bar())
A computed observable.
options
function | description |
---|---|
read / get
|
getter function |
write / set
|
(opt) setter function |
<script setup lang="ts">
// ....
import { observable } from 'vue-observables'
const show = observable(false)
</script>
<template>
<Popup :show="show()" />
</template>