一、 vue3和vue2的區(qū)別

• api的區(qū)別
  vue2：

export default {
    data() {},
    methods:{},
    watch:{},
    mounted() {},
    computed:{},
    filters:{},
    components:{},
    directives:{}
}

vue3

import {ref,computed,onMounted} from 'vue'
setup() {
   const num=ref(0)
   const str=ref('你好！')
   num.value++
   computed(()=>{
          ..........
   })
}

• vue3底層用的typescript語言編寫,vue2用JavaScript實現(xiàn)
• vue3雙向綁定proxy和vue2(Object.defineProperty)不同
• .......

vue3最初開發(fā)的目的：實現(xiàn)代碼關(guān)注點分離，代碼幾何級數(shù)增長帶來的可維護問題

二、vue3核心語法

2.1 組合式api

• ref

  • 通常定義基本類型或數(shù)組類型的變量或常量

  • 例如：

    import {ref} from 'vue'
    let num = ref(10);
    let str = ref('hello world')
    let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }])
    

  • 如何操作dom[通常vue很少操作dom]

    • 給dom定義ref名稱

      <button ref="btn" @click="changeValue">修改值</button><
      

    • 定義一個ref常量

      //定義dom操作對象
      const btn = ref(null)
      

    • 然后通過常量.value.style.css屬性名

       btn.value.style.width='300px'
      

• reactive

  • reactive主要用于復(fù)雜對象類型

  • 例如：

    //定義用戶信息
    const obj = reactive({
      username: '張三',
      age: 20,
      address: '北京',
      hobby: ['音樂', '刷抖音'],
       
    })
    

• toRef

  • 可以將reactive定義的響應(yīng)式對象中的某個屬性單獨提取成ref定義的形式

  • 例如：

    const obj = reactive({
      username: '張三',
      age: 20,
      address: '北京',
      hobby: ['音樂', '刷抖音'],
       
    })
    
    const mingzi=toRef(obj,'username')
    
    模板:
    
    {{ mingzi }}
    

• toRefs

  • 可以將reactive定義的對象屬性全部提取出來轉(zhuǎn)換成ref形式

  • 例如：

    //定義用戶信息，reactive主要用于復(fù)雜對象類型
    const obj = reactive({
      username: '張三',
      age: 20,
      address: '北京',
      hobby: ['音樂', '刷抖音'],
       
    })
    
    //toRefs
    const {username,age,address,hobby}=toRefs(obj)
    

  • computed

    • 可以將ref，reative定義的變量或常量，通過計算屬性生成一個新的可響應(yīng)式的值(ref)

    • 例如：

      //計算屬性
      const total = computed(() => {
      
        let res = 0;
        arr.value.forEach(item => {
          res+=item.num
         })
      
        return res
      
      })
      

    通常computed只能讀取(默認支持get)，不能修改，如果想修改，必須通過set方式

    例如：

    const fullname = computed({
      get: () => { 
        return firstname.value+lastname.value
      },
      set: (val) => {
        firstname.value = val[0]
        lastname.value=val.slice(1)
      }
    })
    

  • watch

    • 數(shù)據(jù)改變時，才監(jiān)聽數(shù)據(jù)的變化

    • 例如：

      //監(jiān)聽ref
      //watch(監(jiān)聽目標,回調(diào))
      watch(firstname, (newV, oldV) => {
        console.log('新值：',newV)
        console.log('舊值:', oldV)
      
      })
      
      //監(jiān)聽reactive
      watch(()=>obj.username, (newV,oldV) => {
         console.log('obj.username新值：',newV)
        console.log('obj.username舊值:', oldV)
      })
      
      

  • watchEffect

    • 進行頁面立即觸發(fā)監(jiān)聽

    • 例如：

      watchEffect(() => {
        console.log('進入立馬監(jiān)聽：',firstname.value)
      })
      

  • nextTick

    • 由于數(shù)據(jù)改變，dom并未更新，如果要拿到dom更新之后的結(jié)果，需要通過nextTick來解決
    • 應(yīng)用場景：
      • 商品列表滾動
      • 數(shù)據(jù)更新，要對dom做一些操作時使用