[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"quirekit-doc:\u002Fguide\u002Fvue":3},{"id":4,"title":5,"body":6,"description":90,"extension":91,"keywords":92,"locale":93,"meta":94,"navigation":95,"order":96,"path":97,"section":98,"seo":99,"stem":100,"__hash__":101},"docs\u002Fguide\u002Fvue.zh-CN.md","Vue 接入",{"type":7,"value":8,"toc":83},"minimark",[9,13,17,39,43,50,54,57,65,69,76],[10,11,12],"p",{},"Vue 负责页面与界面，Editor 负责编辑内容。最小接入只需要一个元素引用和两个生命周期钩子，不需要把整个文档复制到 Vue 状态里。",[14,15,16],"h2",{"id":16},"一个组件就能开始",[10,18,19,20,24,25,28,29,32,33,38],{},"在 ",[21,22,23],"code",{},"onMounted"," 中使用元素引用创建 Editor；在 ",[21,26,27],{},"onBeforeUnmount"," 中调用 ",[21,30,31],{},"destroy()","。下面是可运行的单文件组件，完整写法与安装步骤见",[34,35,37],"a",{"href":36},"\u002Fbuild\u002Fproject","建立第一个编辑器","。",[40,41],"docs-demo",{"name":42},"tutorial\u002Feditor",[10,44,45,46,49],{},"这里用普通变量保存实例。如果模板或其他组件需要引用它，可用 ",[21,47,48],{},"shallowRef\u003CEditor>()","；不需要让内部文档和视图对象深度响应化。",[14,51,53],{"id":52},"让-vue-管理界面状态","让 Vue 管理界面状态",[10,55,56],{},"例如工具栏要显示粗体选中态，可以订阅 Editor 事件，只把相应布尔值同步到 Vue。用户点击按钮时调用 Editor 命令，而不是修改另一份正文后再反写回来。",[10,58,59,60,64],{},"具体按钮和订阅的连接方式见",[34,61,63],{"href":62},"\u002Fbuild\u002Fcommands","工具栏教程","。只有真正打开另一份文档时，才显式调用内容替换方法。",[14,66,68],{"id":67},"nuxt-和异步加载","Nuxt 和异步加载",[10,70,71,72,75],{},"服务端没有挂载元素，因此 Editor 的 DOM 创建放在浏览器挂载阶段。加载浏览器专用能力时，可以使用客户端组件或 ",[21,73,74],{},"ClientOnly","；若动态导入完成时组件已经卸载，就不再创建实例。",[10,77,78,79,38],{},"切换语言只更新界面，不应重新灌入初始正文；切换主题也不应清空用户的撤销历史。想直接复用完整分页界面，可看 ",[34,80,82],{"href":81},"\u002Fclassic\u002Fquick-start","Classic Vue 接入",{"title":84,"searchDepth":85,"depth":85,"links":86},"",2,[87,88,89],{"id":16,"depth":85,"text":16},{"id":52,"depth":85,"text":53},{"id":67,"depth":85,"text":68},"让 Vue 提供容器，在挂载与卸载时创建和释放 Editor。","md",null,"zh-CN",{},true,4,"\u002Fguide\u002Fvue","开始使用",{"title":5,"description":90},"guide\u002Fvue.zh-CN","IkTjiGeFma4dl1oPMUlrlQfeRE-MvozTBzatUdajwWU",1793045209085]