学习笔记-Vue3

最新推荐文章于 2024-05-11 08:54:06 发布

weixin0605

最新推荐文章于 2024-05-11 08:54:06 发布

阅读量141

点赞数 1

分类专栏： vue javascript 前端文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/weixin0605/article/details/125250085

版权

前端同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

vue3

与vue2的不同点

创建

vue-cli
- vue create xxx
  - 选vue3版本
vite
- npm init vite-app
- cd
- npm install
- npm run dev

工程目录

main.js

import {createApp} from 'vue'
import App from './App.vue'

// 创建应用实例对象,类似于vue2中的vm,但app比vm更轻量
const app = createApp(App).mount('#app')

Composition Api

setup

export default {
    name:'xxx',
    props:['xx'],   // 组件传值
    emits:['xxxx']  // 注册事件
    // 在beforeCreate之前，不能用this
    setup(props,context){
        // context.attrs 组件传值，不用props接收，就会在attrs中
        // context.emit 自定义事件触发
        // context.slots 插槽 v-slot:xxx
        // 所有数据 方法 计算属性 等等 都写在setup
        return {
            
        }
    }
}

ref

定义响应式元素

import {ref} from 'vue'

export default {
    setup(){
        // 所有数据 方法 计算属性 等等 都写在setup
        let name= ref('x') // RefImpl 引用对象
        let age = ref(18)  // RefImpl 引用对象
        function changeInfo(){
            name.value = 'xxx'
            age.value = 19
        }
        return {
            name,age
        }
    }
}

reactive

响应式对象

import {ref} from 'vue'

export default {
    setup(){
        // 所有数据 方法 计算属性 等等 都写在setup
        let name= ref('x')      // RefImpl 引用对象
        let age = ref(18)       // RefImpl 引用对象
        let job = reactive({    // Proxy实例对象
            type:'xxx',
            salary:'30k'
        })
        function changeInfo(){
            name.value = 'xxx'
            age.value = 19
            job.value.type='xxx'
        }
        return {
            name,age
        }
    }
}

原理

vue2原理

let person = {
    name:'xx',
    age:18
}

let p ={}

Object.defineProperty(p,'name',{
    configurable:true,
    get(){
        return person.name
    },
    set(value){
        person.name = value
    }
})

vue3原理
- Proxy
- Reflect

let person = {
    name:'xx',
    age:18
}

const p = new Proxy(person,{
    get(target,propName){
        // 读取
        // Reflect 反射
        return Reflect.get(target,propName)
    },
    set(target,propName,value){
        // 修改
        Reflect.get(target,propName,value)
    },
    deleteProperty(target,propName){
        // 删除
        return Reflect.deleteProperty(target,propName) 
    }
})

computed计算属性

import {reactive,computed} from 'vue'

export default {
    name:'xxx',
    setup(){
        let person = reactive({
            firstName = 'xx',
            lastName = 'xxx'
        })
        /*
        person.fullName = computed(()=>{
            return this.person.firstName + '-' + this.person.lastName
        })
        */
        person.fullName = computed(()=>{
            get(){
                return this.person.firstName + '-' + this.person.lastName
            },
            set(value){
                const nameArr = value.split('-')
                person.firstName = nameArr[0]
                person.lastName = nameArr[1]
            }
           
        })
        
        return {
            person
        }
    }
}

watch

watch
- 侦听器

import {ref,reactive,watch} from 'vue'

export default {
    name:'xxx',
    setup(){
        let sum = ref(0)
        let msg = ref('xxxxx')
        let person = reactive({
            name:'xx',
            age:18
        })
        // 监视ref定义的一个数据
        watch(sum,(newValue,oldValue)=>{
            
        },immediate:true)
        // 监视ref定义的多个数据
        watch([sum,msg],(newValue,oldValue)=>{
            
        })
        // oldValue无法正确获取
        // 深度监视不能关闭
        watch(person.(newValue,oldValue)=>{
            
        })
        
        
        
        return {
            sum
        }
    }
}

watchEffect

import {ref,reactive,watch,watchEffect} from 'vue'

export default {
    name:'xxx',
    setup(){
        let sum = ref(0)
        let msg = ref('xxxxx')
        let person = reactive({
            name:'xx',
            age:18
        })
        
        watchEffect(()=>{
            // 函数内部用到哪个值就监视哪个值
            // 监视sum
            const x1 = sum.value
            
        })

        return {
            sum,msg,person
        }
    }
}

自定义hook

将某一功能逻辑写在单独的js文件内并export出

// src/hooks/demo.js
import {reactive,onMounted,onBeforeUnmount} from 'vue'

export default function(){
    let point = reactive({
        x:0,y:0
    })
    
    function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
    }
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })
    
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    
    return point
}

import demo from './hooks/demo'
export default{
    name:'xxx',
    setup(){
        let point = demo()
        return {sum,point}
    }
}

toRef&toRefs

import {reactive,toRef,toRefs} from 'vue'
export default {
    name:'xxx',
    setup(){
        let person = reactive({
            name:'xx',
            age:18,
            job:{
                salary:20
            }
        })
        return {
            //age:toRef(person,'age'),
            //name:toRef(person,'name'),
            //salary:toRef(person.job,'salary')
            ...toRefs(person)
        }
    }
}

shallowReactive&shallowRef

shallowReactive
- 只考虑第一层响应式
shallowRef
- 只处理基本数据类型

import {reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
    name:'xxx',
    setup(){
        let person = shallowReactive({// 只考虑第一层响应式
            name:'xx',
            age:18,
            job:{
                salary:20// 不考虑响应
            }
        })
        return {
            ...toRefs(person)
        }
    }
}

readonly&shallowReadonly

readonly
- person = readonly(person)
shallowReadonly
- person = shallowReadonly(person)
- 浅层不能修改

toRaw&markRaw

toRaw
- 将reactive()加工后的对象转化为原始对象
markRaw
- 标记对象，不会成为响应式对象

customRef

自定义ref

function myRef(value){
    return customRef((track,trigger)=>{
        return {
            get(){
                // 通知vue追踪数据变化
                track()
                return value
            },
            set(newValue){
                value = newValue
                // 通知vue重新解析模板
                trigger()
            }
        }
    })
    
}