Vue Reactivity in Notebook
counter = {
return {
value: 0,
array: []
}
}
{
counter.value++
counter.array.push(counter.value)
return html`Run this cell to modify the object`
}
counter
{
const root = htl.html`<div />`
Vue.createApp({
template: `<div>Unix Time: {{time}}</div>`,
setup(){
const time = VueUse.useTimestamp()
return {
time,
}
}
}).mount(root)
return root
}
updateWithYield = {
// update in delcaring cell
const time = VueUse.useTimestamp()
while(true){
yield time.value // this will be resumed every requestAnimationFrame()
}
}
mutable updateInOtherCell = 0
{
// update in other cell and use invalidation api to cancel listeners
const time = VueUse.useTimestamp()
const stop = Vue.watch(time, (newVal)=>{
mutable updateInOtherCell = newVal
})
invalidation.then(()=>{
stop()
})
return html`<p>update in other cell and use invalidation api to cancel listeners, <br />or it will be left in RAM and run forever (until you refresh the page)</p>`
}
effect = {
return (func)=>{
// this implementation need an additional argument for invalidation
/*const scope = Vue.effectScope()
const result = scope.run(func)
inval.then(()=>{
scope.stop()
})
return result*/
// this implementation get rid of the need for another argument
// check https://observablehq.com/@observablehq/invalidation
const scope = Vue.effectScope()
return Generators.observe(notify => {
notify(scope.run(func))
return ()=> scope.stop()
})
}
}
mutable time2 = 0
effect(()=>{
const time = VueUse.useTimestamp()
Vue.watch(time, (newVal)=>{
mutable time2 = newVal // comment/uncomment this line!
})
return html`try commenting out the code in watch, and notice <code>time2</code> stops/resumes updating.`
})
html`And for a more convenient way to use timestamp, write <code>now</code>: ${now}`
Vue = require('vue@3.2.45/dist/vue.global.prod.js').catch(() => window["Vue"])
VueUse = {
Vue;
await require('vue-demi@0.13.11/lib/index.iife.js').catch(() => window["VueDemi"])
await require('@vueuse/shared@9.3.1/index.iife.min.js').catch(()=>{})
await require('@vueuse/core@9.3.1/index.iife.min.js').catch(()=>{})
return window["VueUse"]
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
