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"]
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.