vue 3.0與2.0的區別

vue3新特性
1/數據響應式原理重新實現(ES6 proxy 代替了ES5的Object.defineProperty) Vue.set()
解決了:例如數據更新檢測bug vue2的push,shift 不是原生js的方法,vue二次封裝了
大大優化了響應式監聽的性能(可以監聽復雜的數據類型)
2.虛擬dom-新算法(更快,更小)
3.提供了composition api ,可以更好的 邏輯復用
4.模版可以有多個根元素
5.源碼typescript重寫,有更好的類型推導
6.移除了過濾器 推薦使,計算屬性

vite的使用
vite低配版的vue-cli,企業做項目還是用vue-cli

npm init vite-app demo

 

在main.js入口掛載

2.0版本
創建vue實例 new Vue({})
創建路由實例 new VueRouter()
創建倉庫  new Vuex.Store()

3.0版本
import { createApp } from 'vue'
import App from './App.vue'

創建vue實例 createApp(App).mount('#app')
創建路由實例 createRouter()
創建倉庫  createStore()

 

 

在體驗

 

 

在vue2 是options API (單項API)

 

 

 

 vue3.0是 composition API 組合式api

import { setup, reactive ,ref,computed,toRefs,watch } from 'vue'

 

1.setup函數 入口

2.reactive 函數 ,讓復雜數據類型變成響應式

3.ref函數,將基本數據類型變成響應式

4.toRefs-解構保留響應式狀態

5.readonly 讓數據變成只讀狀態

 

//setup函數是當前組件入口函數,compositionAPI的起點(入口)

//生命周期比所有的鈎子函數都要早,比之前的beforeCreate這個鈎子都要早

//setup函數沒有this,結果是undefined

export default {
   setup(){


  }      
}

 

//setup函數中定義的數據/方法 ...計算屬性...都需要返回

//setup函數中定義的數據默認不是響應式的

//如果定義的復雜數據類型需要是響應式的,就必須要用reactive()函數包裹 數組,對象

//如果將基本數據類型處理成響應式,就需要用到ref()函數

export default {
   setup() {
     //const obj = {name:'zs',age:12}
     const obj = reactive({name:'zs',age:12})  
     //const money = reactive(100) 報錯
     const changeName =()=>{
       obj.name ='李四'
       console.log(obj)
     }
   } 
   return  {
       obj,
       changeName,
       //money 報錯不用
   }
}    

 

ref()函數

作用:將簡單類型數據,轉換成響應式對象

1/ref函數接受一個簡單類型的值,返回一個可改變的ref響應式對象,返回的對象有唯一的屬性 value

2/在setup函數中,通過ref對象的value屬性,可以訪問到值

3/在模版中,ref屬性會自動解套,不需要額外的.value

const money  = ref(100)
const changeMoney = () => {
　　money.value = 0
}

 

//如果將數據定義到一個整體對象中,直接return這個對象,結構中使用多.幾次

 

//如果不想結構中寫的很繁瑣,可以解構,但是解構后有的數據會丟失響應式狀態

//解決方式:使用toRefs()函數包裹數據,再進行解構

const bigObj = {
    obj:{name:'zs',age:12}
    str:'這是測試',
    money:100
}

return {
   ...toRefs(bigObj)   //如果不這么寫,直接解構,會造成響應式狀態丟失
}

 

 //不想某些數據發生變化,只允許讀取,可以使用readonly函數進行處理

export default {
  setup()  {
    const obj = reactive(name:'zs',age:12)
    const zobj = readonly(obj)
    const changeName = () =>{
       zobj.name = 'lisi'   //去執行后會有一個警告,不允許修改的
   }
    return  {
      zobj,
      changeName
   }
   
  }
}

 

vue3.0 的 計算屬性

const nextAge = computed({
    return +age.value +1 
})

const age = ref(100)
const nextAge = computed({
   get(){
      return +age.value +1
   },
   set(val)
  {
       age.value = newValue -1 
  }
})

return {
   nextAge
}

 

vue3.0的watch(數據源,處理方法,配置對象)

//監聽對象中的某個屬性 (監聽不需要寫在返回)
watch(()=>bigObj.people,(newValue)=>{
  console.log(newValue)
},{deep:true,immediate})

 

 

 

 

 

vue3.0的生命周期對比圖

//vue3中的鈎子函數,不在使用beforeCreate 和 created ,而是用setup,setup中沒有this

//

setup(){
//功能a模塊的鈎子
  onBeforeMount(()=>{
     console.log('掛在前')
  })
  onMounted(()=>{
     console.log('掛載dom結構-2')
  })
  //功能b模塊的鈎子
  onBeforeMount(()=>{
     console.log('掛在前-3')
  })
  onMounted(()=>{
     console.log('掛載dom結構-4')
  })
}

因為是函數,可以多次調用,上面的執行順序是  1,3,2,4

 

 

 

 

vue3.0父傳子的方式

export default {
  props: {
    money:{
      type:Number,
      default:0
   }
  }
  setup(props,context)
 {
    
  const changeMoney =() =>{
     context.emit('change',12)
   }
   return 
   {
      changeMoney
    }
 }
}

 

vue3中也有依賴注入 provide 和 inject

 

 

 

 

vue2中使用this.$refs.xxx獲取dom

在vue3.0中需要聲明一個ref

<template>
   <h1 ref ="hRef"></h1>
</template>

export default
{

  setup(){


  const hRef = ref(null) //注意,這里的hRef 和上面的要一致
  onMounted(()=>{
     console.log(hRef.value) // .value 獲取dom元素
  })
  
 }
}