Vue3中的setup和ref && reactive函数

vue3常用composition API

一、拉开序幕的setup

1.setup是所有composition API 的平台，他是vue3的新的配置项，值为一个函数；

2.组件中所用到的：数据，方法等等，全部配置到setup中。

3.setup的两种返回值：

        (1)返回一个对象，其中的对象为本身定义的属性，方法，在模板中可以直接使用

     （2)返回一个渲染函数：则可以自定义渲染的内容

4.vue2中的配置（data、methods、computed等）不要和setup一起使用；

vue2中可以访问setup中的属性方法，但是setup不能访问vue2的配置属性、方法

当属性、方法重名冲突时，setup优先；

二、main.js文件配置

vue3引入的是createApp的工厂函数；

/* vue3不在是引入vue构造函数，引入的是一个名为createApp的
* 工厂函数
*  */
import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

/* 创建应用实例对象--app（类似之前vue2的vm）*/
const app = createApp(App)
/* 挂载*/
app.mount('#app')

/* unmount卸载挂载*/
// setTimeout(()=>{
//     app.unmount('#app')
// },2000)

三、ref函数

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

语法：const xxx = ref(数据)

        （1）创建一个包含响应式数据的引用对象（ref对象）

        （2）js中操作数据，使用 xxx.value 那到数据 

        （3）在模板中使用数据时，不需要 xxx.value，直接使用

{{xxx}}

注意：可以处理基本数据类型，也可以处理引用数据类型；

四、reactive函数

（1）作用：定义一个对象类型（对象或者数组）的响应式数据（基本类型使用ref函数）

（2）语法：const 代理对象 = reactive(源对象)，接收一个对象或者数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

（3）reactive定义的响应式数据是深层次的；

（4）内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据

五、vue2和vue3中响应式数据

（1）vue2中对data数据操作响应式

方法：vm.$set()，vm.delete()方法；或者数组的splice()方法

（2）Vue3中响应式数据操作

在setup函数里，可以直接对数据进行操作，不需要使用vue或vue.prototype身上的方法

reactive函数可以帮助我们直接实现数据的响应式操作；