vue3.0和vue2.0的区别_vue.js2和vue.js3.0的区别

举例说明：

实现监听鼠标移动坐标

vue2.0写法

<template>
    <div>
        <div>
            x:{{x}} <br>
            y:{{y}} 
        </div>
    </div>
</template>
<script>
    export default {
        name: "index",
        data() {
            return {
                x:0,
                y:0
            };
        },
        created() {
            window.addEventListener("mousemove",this.update)
        },
        mounted() {},
        methods: {
            update(e){
                thisx=e.pageX;
                thisy=e.pageY;
            }
        }
    };
</script>
<style scoped lang="scss">
</style>

vue3.0写法

<template>
    <div>
        <div>
            x:{{x}} <br>
            y:{{y}} 
        </div>
    </div>
</template>
<script>
    import {ref,computed,watch,onMounted,onUnmounted} from "vue"
    function userMousePosition(){
        const x = ref(0)
        const y = ref(0)
        function update(e) {
            x.value=e.pageX;
            y.value=e.pageY;
        }
        onMounted(()=>{
            window.addEventListener("mousemove",update)
        })
    }
    export default {
        setup(){
            const {x,y} =userMousePosition()
            return {x,y}
        }
    };
</script>
<style scoped lang="scss">
</style>

vue 3.0新增：

ref reactive onMounted onUnmounted setup toRefs watchEffect

取代 data 和created声明周期函数

computed和watch按需引入

修改ref值在value里修改 例x.value

watch监听区别监听size变量值

父子传值

 

vuex新增

使用

vue-router新增