(相關資料圖)

vue2.0和vue3.0區別

結構部分

程序主入口文件 main.jsvue2.0vue3.0-暴露出 createApp方法

組件語法部分(vue3.0主要針對api的優化,vue3.0兼容vue2.0寫法)

vue3.0 使用??組合式api???,使用的地方在setup回調函數中，這個回調函數是創建組件之前執行，由于在執行 setup 時尚未創建組件實例，因此在 setup 選項中沒有 this。??這意味著，除了 props 之外，你將無法訪問組件中聲明的任何屬性——本地狀態、計算屬性或方法。??

數據響應式ref:ref 對我們的值創建了一個響應式引用。使用引用的概念將在整個組合式 API 中經常使用。在模板中解析會自動解開，直接使用。(

{{msg}}

);但是在js中必須（msg.value）reactive: 響應式轉換是“深層”的——它影響所有嵌套 property。在基于 ES2015 Proxy 的實現中，返回的代理是不等于原始對象。建議只使用響應式代理，避免依賴原始對象對對象進行結構賦值會讓對對象每一個屬性失去響應式，所有在es6解構賦值前，可以通過toRefs方法包裝toRefs: 將對象每個屬性有具有響應式屬性，并且帶有ref特性；訪問方式不同。可以解構賦值不影響數據的響應式readonly： 有時我們想跟蹤響應式對象 (ref 或 reactive) 的變化，但我們也希望防止在應用程序的某個位置更改它。例如，當我們有一個被 provide 的響應式對象時，我們不想讓它在注入的時候被改變。為此，我們可以基于原始對象創建一個只讀的 Proxy 對象ref/reactive/toRefs 數據區別：

import { reactive, readonly } from "vue"    const original = reactive({ count: 0 })    const copy = readonly(original)    // 在copy上轉換original 會觸發偵聽器依賴    original.count++    // 轉換copy 將導失敗并導致警告    copy.count++ // 警告: "Set operation on key "count" failed: target is readonly.

vue2.0 選項式api

data() {        return {            msg: "初始化"        }    },    methods: {        changeHandle() {            this.msg = "改變的"        }    },

vue3.0 組合式api

setup() {        let msg = ref("初始化");//string number        let person = reactive({name:"lisi",age:20})// object array        const changeHandle = () => { msg.value = "改變的" }         const changeHandle2 = () => { person.age = 30 }        return {            msg,            changeHandle,            changeHandle2        }    },

watch使用vue2.0 選項式api

watch: {    //普通的    msg:{        handler(newValue,oldValue) {            console.log("....")        }    },    //深度    person:{        handler(newValue,oldValue) {        },        immediate:true,        deep:true    }},

*vue3.0 組合式api

setup() {        let msg = ref("初始化");//string number        let person = reactive({name:"lisi",age:20})// object array        watch(msg,(newValue,oldValue)=>{            console.log(this);//undefined;箭頭函數綁定父級作用域的上下文，所以this不會指向當前的組件            console.log(newValue,oldValue);        },{deep:false,immediate:false})        watch(() => person.age,(newValue,oldValue) => {          console.log(newValue,oldValue)      })        return {            msg                }    },

computed使用vue2.0 可以參考之前文章??computed深入??

computed:{     //無參數        filterMsg() {            return this.msg + "999"        },        //有參數        filterMsg2(number) {            return function() {                return this.msg + number;            }        },        // 自定義set方法        filterMsg3: {            get() {                return this.msg + "999"            },            set(value) {                ...            }        }    }

vue3.0

//無參數     const filterMsg =computed( () => msg.value + "fdfasdf")     //有參數     const filterMsg2 =computed(() => {         return function(num) {             return msg.value + num         }     })     // 自定義set方法和get方法    const count = ref(1)    const plusOne = computed({        get: () => count.value + 1,        set: val => {            count.value = val - 1        }    })    plusOne.value = 1    console.log(count.value) // 0

組件間的通信

在了解組件通信之前，我們先要深入了解setup，render方法,this,。

setup

props表示組件傳入當前組件的props值，響應式的，當傳入新的prop時，它將被更新，可以通過watch監聽到變化。

注意：

但是，因為 props 是響應式的，你不能使用 ES6 解構，因為它會消除 prop 的響應性。 我們可以通過 toRefs方法完成可以解構賦值，且不影響屬性的響應式

import { toRefs } from "vue"    setup(props) {        const { title } = toRefs(props)        console.log(title.value)    }

context 上下文傳遞給 setup 函數的第二個參數是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property：

// MyBook.vue    export default {        setup(props, { attrs, slots, emit }) {            ...        }    }

渲染函數

setup() {        const num = ref(100);//添加包裝引用對象        const person = reactive({name:"lisi",age:20});//本身就是響應式對象        const person2 = toRefs(person);//對對象每一個屬性添加包裝引用        console.log(person2)        return () => h("div", [num.value,person.name,person2.age.value])    }