{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vue3.0","attrs":{}}],"attrs":{}},{"type":"text","text":"的各種表現還是非常棒的，相比","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue2.0","attrs":{}}],"attrs":{}},{"type":"text","text":"確實上了一個臺階，據說在客戶端渲染效率比vue2提升了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1.3~2","attrs":{}}],"attrs":{}},{"type":"text","text":"倍，SSR渲染效率比vue2提升了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"2 ~3","attrs":{}}],"attrs":{}},{"type":"text","text":"倍。在面試的過程中可能也會被問到。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"📌 靜態提升","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue中有個編譯器，在vue3的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"package.json","attrs":{}}],"attrs":{}},{"type":"text","text":"文件中有個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"@vue/compiler-sfc","attrs":{}}],"attrs":{}},{"type":"text","text":"，vue2中叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue-template-compiler","attrs":{}}],"attrs":{}},{"type":"text","text":"，這兩個就是編譯器，它會把我們的模板編譯爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"render函數","attrs":{}}],"attrs":{}},{"type":"text","text":"，在vue3中編譯器是很智能的，在編譯的過程中，它可以發現哪些節點是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"靜態節點","attrs":{}}],"attrs":{}},{"type":"text","text":"，什麼是靜態節點？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"靜態節點就是一個元素節點，而且這個節點裏面沒有任何動態的內容，就是說沒有綁定任何動態的屬性，這叫靜態節點，比如：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n ![\"Vue](https://pic1.xuehuaimg.com/proxy/\"./assets/logo.png\"){kind=logo}
\n 法醫
\n createVNode(\"h1\",null,\"法醫\");\n //....其他代碼\n}\n\n//vue3 的靜態節點\nconst hoisted = createVNode(\"h1\",null,\"法醫\");\nfunction render(){\n //直接使用 hoisted就可以了\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue3中，它覺得這既然是一個靜態節點，那麼肯定是不會變化的，不可能說這一次是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h1","attrs":{}}],"attrs":{}},{"type":"text","text":"元素內容是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"法醫","attrs":{}}],"attrs":{}},{"type":"text","text":"，下次變成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h2","attrs":{}}],"attrs":{}},{"type":"text","text":"元素內容是別的了，所以說vue3認爲既然是靜態節點，那麼就沒有必要在render函數中進行創建，因爲一旦數據改變，render函數會反覆運行，然後又會重新創建這個靜態節點，所以爲了提升效率，在vue3中，它會把靜態節點進行提升，提升到render函數外面，這樣一來，這個靜態節點永遠只被創建一次，之後直接在render函數中使用就行了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"運行一個新創建的vue3項目，在控制檯可以清楚的看到，靜態節點被提升到外部了。這個就是靜態節點的提升。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/96/961bc34ef8cf715a5c767bbede4ecd24.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實不僅僅是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"靜態節點","attrs":{}}],"attrs":{}},{"type":"text","text":"會進行提升，而且","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"靜態屬性","attrs":{}}],"attrs":{}},{"type":"text","text":"也是會提升的，ok，我們來看下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是vue3新創建項目中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"APP.vue組件","attrs":{}}],"attrs":{}},{"type":"text","text":"，加一條","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h1","attrs":{}}],"attrs":{}},{"type":"text","text":"元素節點，要注意h1不是靜態節點，它是動態的，因爲內容是動態的，只有屬性是靜態的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"//APP.vue代碼\n\n{{name}}
\n\n \n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這個組件中，除了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"span","attrs":{}}],"attrs":{}},{"type":"text","text":"元素是動態元素之外，其餘都是靜態節點，一般可以說是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"動靜比","attrs":{}}],"attrs":{}},{"type":"text","text":"，動態內容 / 靜態內容，比例越小，靜態內容越多，比例越大，動態內容越多，vue3的編譯器它會非常智能地發現這一點，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"當編譯器遇到大量連續的靜態內容，會直接將它編譯爲一個普通字符串節點","attrs":{}}],"attrs":{}},{"type":"text","text":"，因爲它知道這些內容永遠不會變化，都是靜態節點。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"💉 注意：必須是大量連續的靜態內容纔可以預字符串化哦，切記！目前是連續20個靜態節點纔會預字符串化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而在vue2中，每個元素都會變成虛擬節點，一大堆的虛擬節點😱，這些全都是靜態節點，在vue3中它會智能地發現這一點","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"const _hoisted_1 = /*#__PURE__*/\n//createStaticVNode 靜態節點的意思\n_createStaticVNode(\"\", 1)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"瞅個簡圖，感受一下vue3的魅力：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ea/eaa55521085ca9fa1e560d9734e1d66b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/22/223642bab7a5660b8738ff43bb89bf6b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🥥 緩存事件處理函數","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"舉個栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":" \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"對比處理方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"// vue2處理方式\nrender(ctx){\n return createVNode(\"button\",{\n onclick:function($event){\n ctx.count++;\n }\n })\n}\n\n//vue3 處理方式\nrender(ctx,_cache){\n return createVNode(\"button\",{\n onclick:cache[0] || (cache[0] =>($event) =>(ctx.count++))\n })\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue2中創建一個虛擬節點button，屬性裏面多了一個事件onclick，內容就是count++","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue3中就有緩存了，它認爲這裏的事件處理是不會變化的，不是說這次渲染是事件函數，下次就變成別的了，於是vue3會智能地發現這一點，會做緩存處理，它首先會看一看緩存裏面有沒有這個事件函數，有的話直接返回，沒有的話就直接賦值爲一個count++函數，保證事件處理函數只生成一次，如下圖：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4f/4f8fe407ad97494ef0d62a743fef3006.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🌴 Block Tree","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Block Tree","attrs":{}}],"attrs":{}},{"type":"text","text":" 主要爲了提高新舊兩棵樹在對比差異的時候提升效率，對比差異的過程叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"diff算法","attrs":{}}],"attrs":{}},{"type":"text","text":"，也叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"patch算法","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue2在對比新舊兩棵樹的時候，並不知道哪些節點是靜態的，哪些節點是動態的，因此只能一層一層比較，這就浪費了大部分時間在對比靜態節點上。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"舉個栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"vue2對比：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e5/e5f5f74075de94a573b6e7709be4495c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue2通過一系列對比之後發現，，只有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"input","attrs":{}}],"attrs":{}},{"type":"text","text":"發生了變化，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"黃色方塊","attrs":{}}],"attrs":{}},{"type":"text","text":"部分，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"藍色方塊","attrs":{}}],"attrs":{}},{"type":"text","text":"都爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"靜態節點","attrs":{}}],"attrs":{}},{"type":"text","text":"，並沒有發生變化，這些沒有發生變化的對比都是一些沒有意義的對比，浪費了時間，浪費了生命","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"vue3對比：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/70/707b8a2c803cb4d056cb68585fffd314.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3依託強大的編譯器，編譯器可以對每一個節點進行標記，然後在根節點中記錄後代節點中哪些是動態節點，記錄之後，在對比的過程中它不是整棵樹進行對比，而是直接找到根節點，我們叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block節點","attrs":{}}],"attrs":{}},{"type":"text","text":"，對比動態節點數組就可以了，這樣就會略過所有的靜態節點，也不涉及對樹的深度遍歷了，所以速度會非常快，當靜態內容越多，效率提升就越大。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然可能有小夥伴們會問，當數據更新後可能會多出來分支，這樣處理的話會造成樹的不穩定，樹一旦不穩定就會出問題了，凡是樹不穩定的地方vue3會把它全部變成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"塊block","attrs":{}}],"attrs":{}},{"type":"text","text":"，具體還是挺複雜的，我還沒研究呢，大概就是這麼個意思。等我想明白了，後面再跟大家說哈😅","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🍅 PatchFlag","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3覺得在對比每一個節點的時候還是在浪費效率，儘管說已經跳過了所有不需要比對的節點，但是它還要看看節點的元素類型、屬性以及遞歸子節點有沒有變化，在針對單個節點對比的時候進一步優化，這依然需要依託vue3強大的編譯器，在編譯的時候，它會記錄哪個節點是動態內容，並且做上標記","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/aa/aaca2dfd5807dadb104f71246b6a0ee7.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"舉個栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":" \n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2e/2e243c3929ff945dc733365cf03bdbd9.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3會在編譯的時候，它會對節點做上標記，圖上標記爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1","attrs":{}}],"attrs":{}},{"type":"text","text":"，表示在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div節點","attrs":{}}],"attrs":{}},{"type":"text","text":"中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":"是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"動態","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"舉個栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/27/273472f45fefda0ca7b53d8cec6f2ebf.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"3","attrs":{}}],"attrs":{}},{"type":"text","text":"表示在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div節點","attrs":{}}],"attrs":{}},{"type":"text","text":"中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"class類","attrs":{}}],"attrs":{}},{"type":"text","text":"是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"動態","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"😊 好了， 以上就是我的分享，希望能對大家有所幫助，歡迎大家在評論區討論鴨～","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"希望小夥伴們點贊 👍 支持一下哦～ 😘，我會更有動力的 🤞，晚安！","attrs":{}}]}]}