尝试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="width: 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

巴特西

尝试Vue3.0

最新文章

热门文章