Vue深入-17【vue2和vue3的区别】

(1).vue3安装

安装vue

1.执行命令(这个vue-next是自己命名的)
vue create vue-next
2.进入vue-next执行下列命令(是固定的)
vue add vue-next
3.启动
npm run serve

2.vue3写法特性基于函数

<template>
    <div id="app">
        <span>{{count}}</span>
        <p>
            <button @click="plus">+</button>
            <button @click="minus">+</button>
        </p>
    </div>
</template>
//原本的写法
<script>
    export default{
        name:'App',
        data(){
            return{
                count:0
            }
        },
        methods:{
            plus(){
                this.count++;
            },
            minus(){
                this.count--
            }
            
        }
    }
</script>
//现在的写法
<script>
    import {ref} from 'vue';
    export default{
        name:'App',
        setup(){
            const count = ref(0);
            const plus = () =>{
                count.value++;
            }
            return{
                count,
                plus
            }
        }
    }
</script>
//工程化写法
import {ref} from 'vue';
const useCompute = (count) =>{
    const plus = () =>{
        count.value++;
    }
    return {plus}
}
export default{
    name:'App',
    setup(){
        const count = ref(0),
        {plus}=useCompute(count);
        return{
            count,
            plus
        }
    }
}