Vue 3 新人快速入門

vue 3 相對於 vue 2 作出了哪些改變呢？

1. Vue 3 移除了原有的生命週期函數 、data 、watch 、computed 、method、filter等。

2. Vue 3 採起了對 TypeScript 更好的支持 防止出現一些低級錯誤。

3. Vue 3 是徹底能夠兼容vue 2的 ，在編碼過程當中，能夠在vue 3中使用vue2的寫法。

4. 組件中同時存在兩種寫法時，當setup返回值中定義的方法和methods中的方法同名時，會拋出錯誤，

   定義的數據如和vue2中相沖突的時候 ， data會覆蓋以前的字段

5. vue3採用proxy的方式實現數據代理，只會代理第一層數據 避免了vue2中對data的深層遞歸，提高了組件渲染性能

1. Vue 3 中的 setup 函數

1. vue3中用setup函數整合了全部的api, setup函數只執行一次，在生命週期函數前執行，因此在setup函數中拿不到當前實例this，不能用this來調用vue2寫法中定義的方法。

2. 因vue3 中去除掉了 data ， 採用setup的返回值 作模板的綁定。

3. 父子組件傳遞數據時， vue3 將原有的 this.$emit 使用context.emit 方法替代

export default {
  // props 爲 接收到的父組件傳遞的數據 
  // context 爲 上下文
  setup(props,context){
    return {
      ...  //setup返回的數據
    }
  }
}
複製代碼

2. Vue 3 中的生命週期函數

生命週期函數相對於 vue 2 變成了回調函數的形式

Vue3 能夠寫多個 生命週期函數。依次自上而下執行

setup() {
    onMounted(() => {
      console.log('組件掛載1');
    });
    
    onMounted(() => {
      console.log('組件掛載2');
    });

    onUnmounted(() => {
      console.log('組件卸載');
    });

    onUpdated(() => {
      console.log('組件更新');
    });

    onBeforeUpdate(() => {
      console.log('組件將要更新');
    });

    onActivated(() => {
      console.log('keepAlive 組件 激活');
    });

    onDeactivated(() => {
      console.log('keepAlive 組件 非激活');
    });

    return {};
  },

複製代碼

3.ref 簡單的響應式數據 ( 基礎類型 )

ref能夠將某個普通值包裝成響應式數據，僅限於簡單值，內部是將值包裝成對象，再經過defineProperty來處理的 經過ref包裝的值，取值和設置值的時候，需用經過value來進行設置

<template>
  <div class="mine"> <input v-model="input" /> <button @click="add">添加</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div>
	<-- vue 3 template 支持多個子標籤 --> <div></div> </template>


setup() {
    const input = ref('');
    const todoList = ref<string[]>([]);

    function add() {
      todoList.value.push(input.value);
      input.value = '';
    }

    return {
      add,
      input,
      todoList,
    };
  },

複製代碼

4. reactive 數據綁定 ( 引用類型 )

使用reactive來對複雜數據進行響應式處理，它的返回值是一個proxy對象。

vue3模板: 一個template能夠有多個平級的標籤（vue2中只能在template寫一個子標籤）

<template>
  <div class="mine"> <input v-model="input" /> <button @click="add">增長</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div>
 
	<-- vue 3 template 支持多個子標籤 --> <div></div> </template>

setup() {
    const data = reactive({
      input: '',
      todoList: [],
    });

    function add() {
      data.todoList.push(data.input);
      data.input = '';
    }

    return {
      ...toRefs(data),
      add,
    };
  },



複製代碼

5. Vue 3 中的 computed

計算屬性，變成了函數寫法，當依賴的值發生改變時會從新計算 computed包裝後的值，須要用 .value去取值，template中不須要使用.value。

async setup() {
    const data = reactive({
      a: 10,
      b: 20,
    });
    
    let sum = computed(() => data.a + data.b);

    return { sum };
  },

複製代碼

6. Vue 3 中的 watch

watch 變成了函數寫法，其餘與vue2中用法相同

const state = reactive({ count: 0 })
watch(
 () => state.count,
 (count, prevCount) => {
   //...
 }
)
複製代碼

7.Vue 3 中的 vue-router

使用 vue - router 須要使用 useRoute 和 useRouter

import {useRoute, useRouter} from 'vue-router'

const route = useRoute(); // 至關於 vue2 中的this.$route
const router = useRouter(); // 至關於 vue2 中的this.$router

複製代碼

8. Vue 3 中的 vuex

使用 useStore 來獲取store對象 , 從vuex中取值時，要注意必須使用computed進行包裝，這樣vuex中狀態修改後才能在頁面中響應

import {useStore} from 'vuex'

setup(){
    const store = useStore(); // 至關於 vue2中的 this.$store
    store.dispatch(); // 經過store對象來dispatch 派發異步任務
    store.commit(); // commit 修改store數據
    
    let category = computed(() => store.state.home.currentCagegory
    return { category }
}
複製代碼

9. Vue 3 可使用 jsx 來定義 vue 組件

export const AppMenus = defineComponent({
  setup() {
    return () => {
      return (
        <div class="app-menus"> <h1>這是一個vue組件</h1> </div>
      );
    };
  },
});

複製代碼

PS:你們看了後以爲對本身有幫助能夠三連留言,歡迎提出寶貴意見，也歡迎各位對相關技術有興趣的開發者（由團隊開發人員微信號x118422邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~