vue2和vue3不同写法及区别

一、vue2和vue3写法及区别：

       --写法却别：vue写法共有组合式和选项式两种写法，vue2主要使用选项式写法，vue3主要使用组合式写法;vue2只支持选项式写法 ，vue3同时支持选项式和组合式写法。

       --vue2和vue3双向数据绑定不同

       --vue2和vue3生命周期不同

       --vue2和vue3定义数据方法不同

       --vue2和vue3插槽不同

       --vue2不支持多根节点，vue3支持多根节点

       --响应式原理不同,vue2原理基础依靠 Object.defineProperty；vue3原理基础依靠Proxy

       --diff算法不同，vue3更优化

二、写法不同，写法详解。

  选项式API写法(vue2和vue3都支持)

<template>
<!-- 此标签内主要写html -->
<div class="box" @click="getbtn"></div>
</template>


<script>            //script标签写vue语法
export default {    //此标签意为导出vue模块
     data(){        //data为vue常用字段，主要用来定义数据和变量,用this来调用定义的数据和变量
        return {
            btn: 1,  // 定义一个数据 ,通过上方设置点击事件，在methods中用this.btn调用
        }
     },
     created(){       //生命周期，组件创建时调用方法

     },
     methods:{        //mthods主要来写方法
        getbtn(){
            console.log(this.btn); // 1
        }
     },

     watch:{          //监听时使用（多个影响一个）

     }
}
</script>



<style>
/* 此标签内主要写css样式 */
.box{
    width: 10px;
}
</style>

组合式API写法(两种写法,只有vue3支持)

 第一种：组合式写法

<template>
<!-- 写html -->
<div @click="shdg"> {{ data }}</div>

</template>


<script >
import {ref,reactive}  from 'vue'   
 export default {
    setup(){       //组合式关键setup
              
    let data=ref('蔡徐坤')       //定义数据和变量,js中调用需value，模板中不需
    let das=reactive('鸡坤')   //只能定义对象类型数据，js和模板中调用都不需要调用value

    let shdg=()=>{        //点击事件
        console.log(data.value);   //蔡徐坤
        console.log(das);          //鸡坤

    }

    return{             //重要，定义的变量和方法都要return 出去
        data,
        das,
        shdg
    }
    }
 }
</script>


<style>
/* 写css样式 */
</style>

第二种:组合式写法(常用：简洁，方便)

<template>
    <!-- 写html -->
    <div @click="shdg"> {{ data }}</div>
</template>

<script setup>            //组合式关键setup
import { ref, reactive } from 'vue'

let data = ref('蔡徐坤')       //定义数据和变量,js中调用需value，模板中不需
let das = reactive('鸡坤')    //只能定义对象类型数据，js和模板中调用都不需要调用value
let shdg = () => {            //点击事件
    console.log(data.value);   //蔡徐坤
    console.log(das);          //鸡坤
}
</script>

<style>
/* 写css样式 */
</style>