尝试Vue3.0

Composition API 纯函数式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.global.js"></script>
<script>
    // Composition API
    const {reactive, onMounted, effect, createApp, onRenderTriggered, computed, watch, onBeforeMount, createComponent} = Vue;

    function hooks() {
        let data = reactive({name: 'SpongeBob'});
        onBeforeMount(() => {
            console.log('hooks-------dom加载')
        });
        onMounted(() => {
            console.log('hooks-------dom加载完了');
            setTimeout(() => {
                data.name = 'hooks'
            }, 2000)
        });
        return {
            data
        }
    }
    const Count = createComponent({
        template: `<div>
                        <div style="background: #ccc;" @click="back()">
                            {{props.age}}
                        </div>
                   </div>`,
        // props: {
        //     age: {
        //         type: Number
        //     },
        //     onBack: {
        //         type: Function
        //     }
        // },
        setup (props, context) {
            console.log('接收到父组件传值为', props);
            console.log(context);
            const back = () => {
                // 调用父组件方法 并传递参数
                props.onBack('OK')
            };
            onMounted(() => {
                console.log('组件-------dom加载完了');
            });
            return {
                back,
                props: props
            }
        }
    });
    const App = {
        template: `<div style=" 100px;">
                       <div>name:{{data.name}}</div>
                       <div style="background: red;" @click="other()">age:{{count.age}}</div>
                       <div>{{plusOne}}</div>
                       <Count :age="count.age" @back="onBack"></Count>
                   </div>`,
        components: { Count },
        // beforeCreate && created
        setup () {
            // hooks
            const { data } = hooks();
            // data
            const count = reactive({age: 18});
            // computed
            const plusOne = computed(() => '当前值:' + count.age);
            // method
            const other = () => {
                count.age++;
            };
            const onBack = (val) => {
                console.log('收到子组件------', val);
                count.age--;
            };
            // watch
            watch(() => count.age, (v) => console.log('监听到' + v));
            // beforeMounted
            onBeforeMount(() => {
                console.log('beforeMounted-------dom加载')
                setTimeout(() => {
                    data.name = 'SpongeBob'
                }, 5000)
            });
            // mounted
            onMounted(() => {
                console.log('mounted-------dom加载完了')
            });
            // beforeUpdate -> onBeforeUpdate
            // updated -> onUpdated
            // beforeDestroy -> onBeforeUnmount
            // destroyed -> onUnmounted
            // errorCaptured -> onErrorCaptured
            // 响应式 副作用
            effect(() => {
                console.log('effect--------' + count.age)
            });
            // 返回触发视图更新的事件对象
            onRenderTriggered((event) => {
                // debugger;
                console.log('视图更新---------', event)
            });
            return {
                data, count, // data
                plusOne, // computed
                other, onBack // method
            }
        }
    };
    // 挂载
    let app = document.getElementById('app');
    let container = createApp().mount(App, app);
    console.log(container)
</script>
</body>
</html>

Tree-shaking 按需引入 工具函数 // 可以根据所需要的的API引入


新增响应式数据监听API // reactive effect 主要用来实现跨组件之间状态共享

reactive 监听数据的5个状态

effect 初始化触发一次 数据改变触发一次

触发组件更新 用于排查 // onRenderTriggered 返回触发视图更新的事件对象

props传值 以及子组件调用父组件方法
// 传递

// 接收

props为proxy对象内置父组件传递的值以及方法方法可以直接调用可传递参数

context为上下文对象

参考React Hooks (Experimental Hooks) 逻辑复用机制 及Vue Hooks 用于取代mixins