Vue3.0源码初探

1.Composition API

<script src="vue.global.js"></script>
    <div id="testCon"></div>
    <script>
        function testPosi() {
            let state = Vue.reactive({
                x: 0,
                y: 0
            })

            function update(e) {
                state.x = e.pageX
                state.y = e.pageY
            }
            Vue.onMounted(() => {
                window.addEventListenter('mousemove', update)
            })
            Vue.onUnmounted(() => {
                window.removeEventListenter('mousemove', update)
            })
            return Vue.toRefs(position)
        }
        // composition api 的组合使用
        const App = {
            setup() {
                let state = Vue.reactive({
                    name: 'test01'
                })
                let {
                    x,
                    y
                } = testPosi()

                function changeName() {
                    state.name = 'test02'
                }
                return {
                    state,
                    changeName,
                    x,
                    y
                }
            },
            template: '<div @click="changeName">{{state.name}}  x:{{x}} y:{{y}}</div>'
        }
        Vue.createApp().mount(App, container)
    </script>