vue2与vue3的区别

盘点# vue2与vue3的区别

1、template

在标签这块，Vue2和Vue3的区别就是：Vue3支持碎片(Fragments)，就是说template下可以有多个根节点。而在Vue2中template下只能包含一个根节点。

Vue2

<template>
    <div>我是Vue2</div>
</template>

Vue3

<template>
    <div>我是Vue3</div>
    <div>我是Vue3</div>
</template>

2、data

在data中区别很大，Vue2是在代码里分割了不同的属性,如：data，components, computed属性，methods方法等等。而Vue3中需要使用一个新的setup()方法在组件初始化构造的时候触发。

Vue2

<script>
export default {
    data(){
        return {
            username:'',
            password:''
        }
    },
    methods:{},
    computed:{}
}
</script>

Vue3

<template>
  <div>
    <h1>消息:{{message}}</h1>
    <h1>姓名:{{ datas.name }}</h1>
    <h1>年龄:{{ datas.age }}</h1>
    <h1>工作:{{datas.job.say}}</h1>
    <h3></h3>
  </div>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  setup() {
    let message=ref('hello')
    let datas=reactive({
        name:"小美",
        age:12,
        job:{
            say:100
        }
    })
    return {
        datas,
        message
    }
  },
};
</script>

3、生命周期区别

Vue2 生命周期函数

export default {
  name: '',
  data() {
    return {}
  },
  computed: {},
    beforeCreate() {
        console.log('beforeCreate —— 创建vue实例完成之前所执行的')
    },
    created() {
        console.log('created —— 实例创建完成之后的,初始化data和methods')
    },
    beforeMount() {
        console.log('beforeMount —— 开始编译把data里面的数据和vue语法生成html模板')
    },
    mounted() {
        console.log('mounted —— 开始挂载编译生成的html渲染到页面')
    },
    beforeUpdate() {
        console.log('beforeUpdate —— 当data里面数据改变时触发')
    },
    updated() {
        console.log('updated —— data里面的数据和页面保持同步')
    },
    beforeDestroy() {
        console.log('beforeDestroy —— vue实例从运行状态进入销毁状态,指令等还处于可用状态')
    },
    destroyed() {
        console.log('destroyed —— 组件完全被销毁')
    }
}

Vue3 生命周期函数

<template>
  <div>
    {{msg}}
     <button @click="obj">更新数据</button>
  </div>
</template>

<script>
import {ref} from 'vue'
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue';
export default {
  setup(){
        console.log('vue3 —— setup');
        const msg = ref('我是vue3');
        // 按钮点击事件的回调
        const update = () => {
            msg.value += '1'
        }
        onBeforeMount(() => {
            console.log('onBeforeMount —— 组件挂载到节点上之前执行的函数');
        })
        onMounted(() => {
            console.log('onMounted —— 组件挂载完成后执行的函数');
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate —— 组件更新之前执行的函数');
        })
        onUpdated(() => {
            console.log('onUpdated —— 组件更新完成之后执行的函数');
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount —— 组件卸载之前执行的函数');
        })
        onUnmounted(() => {
            console.log('onUnmounted —— 组件卸载完成之后执行的函数');
        })
        return {
            msg, 
            obj
        }
    }
}
</script>