原副标题：丁鹿大学堂：2023前端开发vue3学习指南（vue3进阶之统计数据预览快照认知和模版）
vue3中统计数据和快照全自动存取
vue3中data中的统计数据，会全自动和采用它的快照存取，统计数据发生发生改变时快照会全自动细，无须他们全自动操作形式dom
事例：建立两个按键，历史记录点选单次。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script> </head> <body> <div id=”root”></div> <script> //模块 const App = { data(){ return{ num:0 } }, template:”<button @click=num++ >点选</button> <span>点了{{num}}<span>” } // 聚合示例 const app = Vue.createApp(App) // 装载 app.mount(#root) </script> </body> </html>但在vue中，只须要 @click=num++ 全自动同时实现统计数据发生改变预览快照。
vue3中的模版
vue3中表述模版有四种形式
1 在模块第一类中透过templeate特性去选定
2 间接在html网页的根原素中选定（介绍，极少采用）
<div id=”root”> <button @click=num++ >点选</button> <span>点了{{num}}<span>” </div>3 透过模块的render() 间接渲染，此方法只在一些特殊情况下采用，介绍即可。
注意：
1如果在 在模块第一类中透过templeate特性去选定了内容，则根原素中的所有内容都会被替换。
2 虽然表述模版的方法有四种，但他们通常采用在模块中的template特性去选定。
