2d:null 2e:["$","title",null,{"children":"Vue Reactivity in Notebook | UnluckyNinja | Observable"}] 33:[] 31:{"id":"ade2d41e2231c97d","slug":"vue","title":"Vue Reactivity in Notebook","thumbnail":"3696b7dd6cf890bdf3ca8af2180403b0767799577a173b925f1ecc921d89f887","access_level":"public","create_time":"$D2022-10-15T04:11:05.129Z","update_time":"$D2022-11-23T18:34:38.178Z","view_time":null,"first_public_time":"$D2022-10-15T04:11:05.129Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024"},"version":420,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null}],"members":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5a53e6506aee92a4","slug":"vue","title":"Vue","owner":{"id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja"}},"type":"notebook","body":{"title":"Vue Reactivity in Notebook","cells":[{"id":0,"value":"# Vue Reactivity in Notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"## Notebook Reactivity\nA notebook's reactivity is determined by cell reference. It only automatically changes when the reference points to different value/object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"For example, an object here is assigned to a cell reference:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"counter = {\n return {\n value: 0,\n array: []\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"{\n counter.value++\n counter.array.push(counter.value)\n return html`Run this cell to modify the object`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"You will not see any update until you manually reevaluate the referencing cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"counter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"Cell reference can also point to primitive type while stay editable, in two ways:\n\n1. By `viewof`\n\n2. By `mutable`\n\n(Would add short description in the future. But before then, you can always checkout official document, by clicking the help symbol at right.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"## Vue Reactivity\nVue(3+)'s Reactivity is tracked down with Proxy API. \nAfter you have declared a `ref` or `reactive`, the invoking to get the value will be memorized. \nAnd when the value is changed, the invocation will be rerun to update corresponding view or listeners.\n\nEvery reactive target is wrapped in object and managed internally. So, it doesn't need to concern about reference change to achieve reactivity. Which also means that it needs some tweak to cooperate with a notebook's \"referencing\" reactivity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"### A Typical Vue App\nThis is the intended way how a Vue app runs on itself.\nYou create an element, a Vue instance, and mount it on the element.\nThen return the element so that the notebook will display it for you. \nAll logic is processed in the Vue instance, and the element will be rendered/updated accordingly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"{\n const root = htl.html`

`\n Vue.createApp({\n template: `

Unix Time: {{time}}

`,\n setup(){\n const time = VueUse.useTimestamp()\n return {\n time,\n }\n }\n }).mount(root)\n return root\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"The drawback is that this cell can't make contribute to other cells, because everything is shadowed by the Vue instance.\n\nGood news is, Vue 3's reactivity system works without a Vue instance! \nAs long as you take care of cell reactivity, you can use it anywhere.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"### Use Vue without Vue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"updateWithYield = {\n // update in delcaring cell\n const time = VueUse.useTimestamp()\n while(true){\n yield time.value // this will be resumed every requestAnimationFrame()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"mutable updateInOtherCell = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"{\n // update in other cell and use invalidation api to cancel listeners\n const time = VueUse.useTimestamp()\n const stop = Vue.watch(time, (newVal)=>{\n mutable updateInOtherCell = newVal\n })\n invalidation.then(()=>{\n stop()\n })\n return html`

update in other cell and use invalidation api to cancel listeners,
or it will be left in RAM and run forever (until you refresh the page)

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"**BONUS**: You can also save yourself from manually call every stop by leveraging Vue's `effectScope()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"effect = {\n return (func)=>{\n // this implementation need an additional argument for invalidation\n /*const scope = Vue.effectScope()\n const result = scope.run(func)\n inval.then(()=>{\n scope.stop()\n })\n return result*/\n // this implementation get rid of the need for another argument\n // check https://observablehq.com/@observablehq/invalidation\n const scope = Vue.effectScope()\n return Generators.observe(notify => {\n notify(scope.run(func))\n return ()=> scope.stop()\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"mutable time2 = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"effect(()=>{\n const time = VueUse.useTimestamp()\n Vue.watch(time, (newVal)=>{\n mutable time2 = newVal // comment/uncomment this line!\n })\n return html`try commenting out the code in watch, and notice time2 stops/resumes updating.`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"html`And for a more convenient way to use timestamp, write now: ${now}` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"If you need a specific version of Vue, fork this notebook and make your own version.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"Vue = require('vue@3.2.45/dist/vue.global.prod.js').catch(() => window[\"Vue\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"VueUse = {\n Vue;\n await require('vue-demi@0.13.11/lib/index.iife.js').catch(() => window[\"VueDemi\"])\n await require('@vueuse/shared@9.3.1/index.iife.min.js').catch(()=>{})\n await require('@vueuse/core@9.3.1/index.iife.min.js').catch(()=>{})\n return window[\"VueUse\"]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"