Vue3.0 —— setup、ref、reactive和 computed的简介及使用

一. setup

特性：

        1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

　　2、setup函数是 Composition API（组合API）的入口

　　3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

使用：

        1.setup可以作为函数使用： 

setup作为函数使用时需要注意：

            1.这个函数内部的变量/函数是局部的
            2.这个函数的返回值 可以被当前组件的任意地方使用
            3.这个函数内部不要使用this来操作组件数据
            4.setup返回的对象中的数据和data中的数据同名了 setup优先级更高
            5.setup在组件加载期间 只会运行一次

2.setup也可以作为标签的属性，即；这样写就不用写return来返回，模块中也能使用标签内的数据。

二、ref

        ref的作用：定义一个响应式的数据

        语法：let xxx = ref("value")

        注意：1.在js中操作数据时要使用.value，即xxx.value

                   2.模板中读取数据不需要.value,可以直接使用

                   3.接收的数据类型可以是基本数据类型也可以是引用数据类型

三、reactive

        作用：定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)，主要用于嵌套层级比较复杂的数据

        语法：let代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象），即 let xxx = reactive(value)

        注意：在js中操作数据时不需要使用.value，可以直接使用变量

四、computed计算属性

        vue3.0中的computed计算属性与vue2中的用法一致。