# vue3-demo

**Repository Path**: git-king/vue3-demo

## Basic Information

- **Project Name**: vue3-demo
- **Description**: vue3快速上手项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-06
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

# vue3-demo

## Project setup
```
yarn install
git config --global user.name "NOgit王"
git config --global user.email "NO9773011+git-king@user.noreply.gitee.com"
git remote add origin https://gitee.com/git-king/vue3-demo.git
git push -u origin "master"
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

###Vue3项目的变化
```
1.增加了许多全局的Api
    defineComponents
    createStore
    createRouter
2.增加文档碎片
    不需要用根标签包裹文件
3.setup(props,context)
    把methods和data合并；
    相当于mounted和beforeMounted；
    优先级高于data；
    没有this；
    前面不要写async 会导致setup中的数据变成promise；
4.ref一般定义原始数据类型的响应式数据
     定义对象会转化成reactive
    基础用法
    import {ref} form'vue'
        {{a}}
        const a=ref(1)
        return{
            a
        }
        a.value++
5.reactive
    基础用法
    import {reactive} form'vue'
        {{obj.str}}
        const obj=ref({
            a:'1',
            str:'haha',
            boo:'true',
            obj1:{
                a:'123'
            }
        })
        return{
        obj
        }
        obj.a++
    toRefs扩展对象，避免冗余代码
    {{str}}
    return{
        ...toRefs(obj)
    }
6.vue2与vue3响应式原理变化(可以增删data的值)
    vue2
    data的响应式原理
    const vm={}
    const data={
        name:'tom',
        age:'12'
    }
    Object.entries(data).forEach(([prop,value])=>{
        let initValue=value;
        object.defineProperty(vm,prop,{
            get(){
                console.log('执行get')
                return initValue
            }
            set(newValue){
                console.log('执行set')
                initValue=newValue
            }
        })
    })

    console.log(vm.name)
    vm.name="bob"
    vm.name

    数组重写
    obj={
        _push(){},
        _pop(){},
        _shift(){},
        _unshift(){},
        _splice(){},
        _sort(){},
        _revert(){}
    }
    Object.keys(obj).forEach(key=>{
        Object.defineProperty(obj,key,{
            value:function(...args){
                return Array.prototype[key.substr(1)].call(this,...args)
            }
        })
    })
    const arr=new Array()
    arr.__prto__=obj

    vue3
    data响应式原理
    let user={
        name:'xaiohu',
        age:'11'
    }
    const proxyUser=new Proxy(user,{
        get(target,prop){
            console.log('劫持get()',prop);
            return Reflect.get(targrt,prop)
        },
        set(target,prop,val){
            console.log('劫持set()',prop,val);
            return Reflect.set(targrt,prop,val)
        }
        deleteProperty(target,prop){
            console.log('劫持get()',prop);
            return Reflect.deleteProperty(targrt,prop)
        }
    })
    console.log(proxyUser===user)
    //false
7.computed,watch,watchEffect
let str=ref('111')
let user=reactive({
        name:'xaiohu',
        age:'11'
    })
const obj=computed(()=>{
    user.name+user.age
})

watch([str,()=>user.name],(new,old)=>{},{immediate:true,deep:true})
watchEffect((new,old)=>{str.value=user.name+user.age})
8.生命周期自行找资料
9.ref,nextTick
10.自定义钩子函数hook
11. shallowReactive(只代理对象第一层的变化)，shallowRef(只代理整体的变化)

    readonly(报错禁用数据),shallowreadonly(只报错第一层禁用数据，第二层开始不报错，但是改变不会生效)

    toRaw(使reactive后响应式对像变成普通对象，即使拓展开也没有响应式),markRaw(修改普通数组时使其不具有响应式)应用场景:较大的不可变数据，第三方实例或者组件对象

    interFance=toRef(obj,'key')创建引用关系，unInterFance=ref(obj.key)单纯拷贝值
    customRef详情见About.vue

12.provide，inject拥有父子及深层级的组件
13.isRef,isReactive,isReadonly,isProxy
```