vue3 自学笔记(一)

420 阅读1分钟

setup

  • 这个方法相当于 beaforeCreate 和 created 的结合
  • 这个方法中不能访问到this
  • 必须要return出去一个对象
  • 使用方法
    setup(){
        const number = ref(0)
        return{
            number
        }
    }

生命周期

vue2vue3
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestoryonBeforeUnmount
destoryedonUnMounted

使用方法

    import { onMounted } from 'vue'
    ......
    setup(){
        onMounted(()=>{
            console.log('获取数据!')
        })
    }

reactive

  • 用于创建响应的对象(解决了vue响应对象所存在的问题)
    import { reactive } from "vue"
    ......
    setup(){
        const p = reactive({
            name:'xxx',
            age:'10086'
        })
        console.log(p); // Proxy{name:'xxx',age:'10086'}
        return {
            p
        }
    }

ref

  • 与“reactive”的功能基本相似
  • ref是通过“reactive”进行包装之后的对象,ref('0') = reactive({value:'0'})
  • 使用上存在一些差异
   import { ref,onMounted } from "vue"
   ......
   setup(){
       // 可以创建基本类型的数据,也可以创建引用类型的数据
       const number = ref(0);
       const p = ref({
           name:'xxx'
       })
       onMounted(()=>{
           number.value ++ ; // 需要使用".value"来调用
           console.log(p.value)
       })
       return {
           number,
           p
       }
   }

toRef

  • 与“ref”类似,具体差别看下表

    类别reftoRef
    是否可以改变视图
    是否改变原数据
    对原数据的引用方式拷贝原数据拷贝原数据的引用
  • 使用方法

 import { toRef } from "vue"
 ......
 setup(){
    const p = {name:'123'};
    // 第一个参数是对象名,第二个参数是key值
    const name = toRef(p,'name'); 
    onChangeName = () =>{
        name.value = "xx";
        console.log(p.name); // "xx"
    }
    return{
        name
    }
 }