vue3-组合式API

1.语法

vue3支持vue2的选项式API的写法，但是也拥有自己的一套语法；

新的vue3语法为组合式API语法；

下述代码中的语法为非脚手架中的语法；所以每个函数都需要使用Vue对象调用；

// 设置vue实例对象
var vm = {
    setup() {
        // 基本类型值使用Vue.ref()进行设置
        var dataOne = Vue.ref('设置的数据值');
        // 更改基本类型的值
        dataOne.value = '改变后的基本类型值';

        // 引用类型值使用Vue.reactive()设置
        var dataTwo = Vue.reactive({name:"demo",age:29})
        // 更改基本类型的值
        dataTwo.name = 'example';

        
        // 生命周期函数 
        Vue.onBeforeMount(() => {
            console.log('渲染之前');
        });
        Vue.onMounted(() => {
            console.log('渲染完毕的');
        });
        Vue.onBeforeUpdate(() => {
            console.log('更新之前');
        });
        Vue.onUpdated(() => {
            console.log('更新之后');
        });
        Vue.onBeforeUnmount(() => {
            console.log('销毁之前');
        });
        Vue.onUnmounted(() => {
            console.log('销毁之后');
        });

        // 计算属性: 有返回值的函数
        var all = Vue.computed(()=>{
            return dataTwo.name + dataOne.value;
        })

        // watch 监听器 监听函数第一个参数是改变后的值，第二个参数是改变前的值
        // 写法一 直接监听基本数据类型或者引用数据类型整个
        // 第一个参数是：被监听：是设置的接受基本类型或者引用类型的变量,第二个是监听函数,
        // 基本数据类型
        Vue.watch(dataOne,(newValue,oldValue)=>{
            console.log(newValue);
        })
        // 引用数据类型 
        Vue.watch(dataTwo,(newValue,oldValue)=>{
            console.log(newValue);
        })

        // 写法二 监听基本类型值的值和引用数据类型的某个属性或者元素,
        // 第一个被监听的对象需要使用函数返回值,第二个是监听函数
        // 基本数据类型
        Vue.watch(()=>dataOne.value,(newValue,oldValue)=>{
            console.log(newValue);
        })
        // 引用数据类型 
        Vue.watch(()=>dataTwo.name,(newValue,oldValue)=>{
            console.log(newValue);
        })

        return {
            dataOne,
            all
        }
    }
}

2.vue2与vue3的区别

1.Vue2中使用new Vue()创建根组件对象，vue3使用Vue.createApp()创建根组件对象

2.Vue2中设置根组件模板使用el字段绑定,vue3渲染根组件时候使用根组件对象的mount的函数；

3.Vue2 根组件中data是一个对象,Vue3根组件中data返回对象的一个函数;

4.Vue3中废除了filters对象字段，可以使用computed进行代替；

5.Vue2使用钩子函数通过钩子函数的函数名字段;Vue3使用钩子函数通过使用Vue对象的钩子函数(这里钩子函数使用on+钩子函数函数名)；

6. 不同于vue2的八个钩子函数（beforeCreate,created,beforeMounted,mounted,beforeUpdate,updated,beforeDestroy,destroyed)，vue3也有八个钩子函数(setup,mount,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted);