Vue3全面总结

Vue3入口文件比Vue2入口文件更加轻量、简洁

// 引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象———app(类似于之前Vue2中的vm,但app比vm更"轻")
createApp(App).mount('#app')

Vue3响应式原理

下面是Vue2实现响应式和Vue3实现响应式的原理

模拟Vue2中实现响应式 

let person={
            name:'张三',
            age:18
        }  
 let p = {}
        Object.defineProperty(p,'name',{
            configurable:true,
            get(){ // 有人读取name时调用
                return person.name;
            },
            set(value){  // 有人修改name时调用
                console.log('有人修改name属性了,我发现了,我要去更新界面');
                person.name=value;
            }
        })
        Object.defineProperty(p,'age',{
            get(){ // 有人读取age时调用
                return person.age;
            },
            set(value){  // 有人修改age时调用
                console.log('有人修改age属性了,我发现了,我要去更新界面');
                person.age=value;
            }
        })

 模拟Vue3中实现响应式

const p = new Proxy(person,{
            // 有人读取p的某个属性时被调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`);
                return Reflect.get(target,propName);
            },
             // 有人修改p的某个属性或给p追加某个属性时被调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性`);
                Reflect.set(target,propName,value)
            },
             // 有人删除p的某个属性时被调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性`);
                return Reflect.deleteProperty(target,propName);
            }
 }) 

 Vue3生命周期钩子

 通过配置项的形式使用生命周期钩子 

  beforeCreate(){
    console.log('-----beforeCreate-----');
  },
  created(){
    console.log('-----created-----');
  },
  beforeMount(){
    console.log('-----beforeMount-----');
  },
  mounted(){
    console.log('-----mounted-----');
  },
  beforeUpdate(){
    console.log('-----beforeUpdate-----');
  },
  updated(){
    console.log('-----updated-----');
  },
  beforeUnmount(){
    console.log('-----beforeUnmount-----');
  },
  unmounted(){
    console.log('-----unmounted-----');
  } 
};

 通过组合式API的形式去使用生命周期钩子

 setup() {
    // 数据
    let sum = ref(0);
    console.log('---setup---');

    onBeforeMount(()=>{
        console.log('---onBeforeMount---');
    })
    onMounted(()=>{
        console.log('---onMounted---');
    })
    onBeforeUpdate(()=>{
        console.log('---onBeforeUpdate---');
    })
    onUpdated(()=>{
        console.log('---onUpdated---');
    })
    onBeforeUnmount(()=>{
        console.log('---onBeforeUnmount---');
    })
    onUnmounted(()=>{
        console.log('---onUnmounted---');
    })

    // 返回一个对象（常用）
    return {sum};
  },

 自定义hook(钩子)

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function(){
    // 实现鼠标"打点""相关的数据
    let point=reactive({
        x:0,
        y:0
    })

    // 实现鼠标"打点""相关的方法
    function savePoint(e){
    point.x=e.pageX
    point.y=e.pageY
    console.log(e.pageX,e.pageY);
    }

    // 实现鼠标"打点""相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })

    return point;
}

静态引入和异步引入

import Child from './components/Child' //静态引入
const Child = defineAsyncComponent(()=>import('./components/Child')) // 异步引入（动态引入）