vue3.0核心变化

为什么要用proxy替换defineProperty

1 defineProperty监听对象中的对象 需要递归 proxy会监听整个对象

2 proxy 只是代理 并不会改变原对象 defineProperty会更变原对象

3 defineProperty的get想要返回value需要借助一个全局对象

4 defineProperty没办法监听对象中的数组

vdom diff

vue2.x 一层层的遍历比对，速度的快慢是由dom的数量来决定的 vue3 对节点进行标记 只更新动态节点

<div>
    <span>1</span>
    <span>{{message}}</span>
</div>

//它会创建一个_createBlock
export function render(_ctx,_cache){
    return (_openBlock(),_createBlock('div',null,[
        _createVNode('span',null,'static') 
        //标记这个节点为静态节点 diff的时候就可以忽略
        _createVNode('span',null,_toDisplayString(_ctx,mes),1) 
        //标记一个动态节点，这个1代表的是一个动态的文本节点
    ])
}

函数式

vue2.x 整个vue是一个类

class Vue {}

vue 3 每一个方法都是一个独立的方法 通过export导出 这样可以通过tree-shaking进行打包优化 只打包引入的

var vue = (function(){
    function onMounted(){
        
    }
    exports.onMounted = onMounted
})() 
// 一个自执行函数

composition api

<template>
    {{message}}
    <!--不需要额外包裹div-->
</template>

import {reactive,ref,onMounted,watch,watchEffect,computed} from 'vue';
export default {
    setup(){
        //创建有个响应式数据
        //单个对象
        var num = ref(33)
        //对象
        var state = reactive({
            a:123
        })
        //对num进行监听
        watch(num,function(newNum,oldNum){
            
        })
        //对state里面的数据进行监听 改动就会触发
        watchEffect(() => {
            console.log(state.a)
        })
        onMounted(() => {
            //对数据进行改动
            setTimeout(() => {
                state.a = 666;
                num.value = 555;
            },300)
        })
        //计算属性
        let num2 = computed(() => {
            return num.value + 33;
        })
        return {
            state,
            num,
            num2 
        }
    }
}

vue router

import {createPouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/',
            components:
        }
    ]
});
//main.js
import {} from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);//注册路由
app.mount('#app')

vuex

// 等待更新