vue3

Vue3 Composition API用法介紹、基礎入門

楊琇芳 Bruce Yang 2021/10/11 23:33:19
61

Vue3.0的一些新特性

  • Vue3是向下相容,Vue3 支援大多數 Vue2 的特性。拿 Vue2 的語法開發 Vue3,也是沒有任何問題的。
  • 效能的提升,打包大小減少 41%,初次渲染快 55%,更新快 133%,記憶體使用減少 54%。
  • 新推出的Composition API ,在 Vue2 中遇到的問題就是複雜元件的程式碼變的非常麻煩,甚至不可維護。Composition API一推出,立馬解.       決了這個問題,它是一系列 API 的合集。
  • 其他新特性:Teleport(瞬移元件)、Suspense(解決非同步載入元件問題)和全域性 API 的修改和優化。
  • 更好TypeScript支援

 

Vue3 基礎格式

<div id="app"></div>
    <script>
        const App = {
            //1.先創建一個APP的Object 
            setup(){
                //3. setup函式
                return{
                    //4.將setup資料return回模板
                }
            }
        };

        Vue.createApp(App).mount("#app");
        //2.vue的createApp把創建的APP放進來,mount目前畫面上面這個#app的進入點
    </script>

 

Vue.3 實體化頁面渲染

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const { ref } = Vue;
				//4. 使用解構的方式從Vue裡面法ref方法取出來(做雙向綁定)
        const App = {
				// 2. 先宣告一個叫App的Object,放到createApp(),裡面
            setup(){
						// 3. setup函式,是接下來所有在操作跟vuejs相關的內容都會在這裡面
                const msg = ref('Hello Vue!');
								//5. 利用ref雙向綁定語法將內容塞進msg裡面,就可以直接操作msg的data 

                return{
								//6. 當做完 ref動作時,必須要將資料返回到模板語法裡面
                    msg,
                }
            }
        };
        Vue.createApp(App).mount("#app")
				// 1.先將Vue3實體準備好,並塞入實體好了的Object,直接mount到模板的div(#app)
    </script>
</body>
</html>

 

setup( )函數 起手式

<script>

      const App ={
        //1. 物件裡放的Vue3操作、內容...

        setup(){
          //3. 跟vue操作有關都會寫在這裡面
          
          return{
            //4. 需要放到HTML上的資料,需要return出來
          }
        }
      };

  Vue.createApp(App).mounted("#app")
  //2.global環境下Vue物件,創造一個應用程式本身(createApp), 再把物件放進來(App),接著再掛載(mounted)到DOM上面(#app)
</script>

 

如何在Vue3裡定義需要的資料 ref

<body>
    <div id="app">
      <h1>{{text}}</h1>
      <!-- 3.利用雙向綁定{{}}將要顯示的資料放進去 -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const App = {
        setup() {
          
          const text = Vue.ref("Hello vue")
          //1.宣告變數資料並用ref來包裝內容

          setTimeout(()=>{
            text.value = "Bruce"
          },1000)
          //4. 1秒後text改變value值

          return {
            text
            //2. 將需要掛載到HTML的資料return出去
          };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>
  </body>

Vue.ref把資料起來的時候,會回傳一個物件,物件裡有value的屬性。

透過value屬性修改、抓取資料

 

如何在Vue3裡定義需要的資料 reactive

定義資料的方法,reactive只接受物件{ }、陣列 [ ]型態的值

※ref可以接受任何型別的資料

<body>
    <div id="app">
      <h1>{{message.text}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const { reactive } = Vue
      const App = {
        setup() {
          const message = reactive({text: "Bruce"})
          return {
            message
          };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>
  </body>

 

 

選擇ref?還是reactive?

ref( )

⇒ 可以接受任何型態的資料,但是不會對物件或陣列內部的屬性變動作監聽

reactive( )

⇒只能接受物件或陣列,可以做深層的監聽,以及訪問資料不需要.value

 

vue3.x的生命週期和鉤子函式

<body>
    <div id="app">
      <h1>{{idx}}</h1>
      {{computedFun}}

    </div>

    <script src="./js/vue.js"></script>
    <script>
      const { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, computed } = Vue;
      const App = {
        setup() {
          console.log("當Vue掛載到app上面後執行");

          const computedFun = computed(()=>{
            console.log("computedFun")
            return "computed Fn"
          })

          const idx = ref(0);
          setTimeout(() => {
            idx.value = 1;
            console.log(idx.value);
          }, 3000);

          onBeforeMount(() => {
            // DOM 渲染前
            console.log("DOM 渲染前");
          });

          onMounted(() => {
            // DOM 渲染完成後
            console.log("DOM 渲染完成後");
          });

          onBeforeUpdate(() => {
            // 在資料更改導致virtual DOM重新渲染前調用
            console.log("資料更改前");
          });

          onUpdated(() => {
            // 在資料更改導致virtual DOM重新渲染後調用
            console.log("資料更改後");
          });

          return {
            idx,computedFun
          };
        },
      };

      Vue.createApp(App).mount("#app");
    </script>
  </body>

 

執行結果:

當Vue掛載到app上面後執行

DOM 渲染前

computedFun

DOM 渲染完成後

1

資料更改前

資料更改後

 

以上流程可得知,template會先解析成AST語法樹,AST(Abstract Syntax Tree)即抽象語法樹,再轉換成render function,透過render function產生出virtual DOM,然後產出的vue會再透過Patch function 將 virtual DOM放到real DOM下,在render UI的同時,watcher會把component的相依數據蒐集,並在這些相依資料更新時重新render,達到自動化更新的效果。

 

 

 

楊琇芳 Bruce Yang