目录

01 setup 函数

02 vue3的生命周期函数

03 reactive 函数

04 toRef 函数

05 toRefs 函数

06 ref 函数

07 ref 属性

08 computed 计算属性

---

01 setup 函数

        vue3推出了setup函数,用作所有数据的初始化的函数,一切数据都定义到setup函数里面

        setup函数必须对外暴露一个对象 ,对象里面写你想要使用的数据

        在setup函数里面直接返回的数据 只能用作渲染 不能修改 因为没有双向数据绑定的效果

        setup函数内部没有this,因为这个函数执行的时候 当前组件还没有初始化成功

        setup函数是在组件初始化之前执行的 他返回的数据和函数可以在模板中使用

        但是还没有双向数据绑定的效果

02 vue3的生命周期函数

        vue3的生命周期函数有七个 分别是

        setup创建实例前,

        onBeforeMount 挂载dom前,onMounted 挂载dom后,

        onBeforeUpdate更新组件前,onUpdated更新组件后,

        onBoforeUnmount卸载销毁前,onUnmounted卸载销毁后

        vue3的生命周期函数 需要在setup函数里面定义 参数传入回调函数 进行执行

        需要使用哪个钩子函数,就需要从vue中解构引入进来

        vue3钩子函数 可以调用多次 不会被覆盖 都会执行  目的是为了分模块封装

03 reactive 函数

        reactive是一个函数,它可以定义一个复杂数据类型, 成为响应式数据

        使用步骤:

                1.import { reactive } from 'vue'

                2.在setup函数里面定义reactive对象, 对象内部包含每个数据

                3.最后setup函数把reactive函数的值作为返回值返回

                4.页面最后就可以使用reactive里面的数据了

        reactive 函数的参数的对象里面 可以定义数据和事件驱动函数

        事件驱动函数可以修改当前reactive里面的数据  具有双向数据绑定的效果

04 toRef 函数

        toRef函数可以把reactive里面的某个数据单独拿出来 并且依然保持双向数据绑定的效果

        使用步骤:

                1.引入 toRef 函数

                2. let 取出的变量 = toRef(要取出数据的reactive对象,'取出的数据变量名')

        通过toRef取出的数据 页面中也可以直接使用

        在方法中使用需要通过value属性 获取值和修改值 

05 toRefs 函数

        toRefs函数可以把reactive里面的数据都拿出来,使用...扩展运算符来展开数据,

使用toRefs展开的数据可以直接使用,不用加对象名.

        不使用toRefs,直接使用...扩展运算符展开的reactive数据 没有双向数据绑定的效果

06 ref 函数

        reactive能够定义复杂数据类型的数据为响应式数据

        ref 能够定义基本数据类型的数据为响应式数据

        ref 函数 修改值的时候或者获取值的时候(js操作) 需要.value

        在mustache语法中使用的使用可以省略.value

        ref 也可以定义复杂数据类型为响应式数据

        使用场景:

                当你明确知道需要的是一个响应式数据是对象, 那么就使用reactive即可,

                其他情况使用ref

07 ref 属性

        vue2通过标签的ref属性 可以获取当前节点的dom对象

                如果ref定义在自定义组件上面 可以获取该组件的对象

                this.$refs.ref的值  获取dom节点对象或者子组件对象

        vue3获取页面dom的步骤:

                1.在setup函数里面使用ref(null) 返回一个空节点对象

                2.在setup函数里面 return 返回的数据里面需要包含这个数据

                3.在页面标签上面 定义ref属性 等于setup返回的这个ref响应数据名称

                4.在onMounted钩子函数里面 就可以通过这个变量名.value获取节点对象

        如果有多个标签都定义同名的ref 那么会出现覆盖的问题

        如果想要通过ref属性 一次性获取一堆元素 

        那么 就得通过函数遍历 定义一个函数 暴露给模板使用 

        标签上面 :ref="这个函数名"  这个函数自动被遍历

        函数的参数是每次遍历到的元素 自己可以选择存放到指定数组里面

08 computed 计算属性

       定义计算属性 通过computed函数定义

           基本使用:

                let 计算属性 = computed(()=>{

                        调用时里面传一个回调函数,回调函数的返回值就是当前计算数据的变量

                        return 值;

                }) 

            高级使用

                let 计算属性 = computed({

                        get(){ 返回当前计算属性应该计算出来的值 },

                        set(){ 在计算属性的存值器里面修改 相关的变量的值 }

                })