Vue2.0與Vue3.0區別總結

結構部分

1. 程序主入口文件 main.js
2.       vue2.0

     import Vue from 'vue'
       import App from './App.vue'
       import router from "./router"
       import store from "./store"
       new Vue({
           store,
           router,
           render: h => h(App),
       }).$mount('#app')

   vue3.0-暴露出 createApp方法

      import { createApp } from 'vue';
       import App from './App.vue'
   
       createApp(App).mount('#app')

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

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

   1. 1. 數據響應式
         ref:ref 對我們的值創建了一個響應式引用。使用引用的概念將在整個組合式 API 中經常使用。
         在模板中解析會自動解開，直接使用。(<p>{{msg}}<p>);但是在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

             1. 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 }) {
                         ...
                     }
                 }

             渲染函數 h

              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])
                 }