一、setup函数

        1.理解：Vue3.0中一个新的配置项，值为一个函数。

        2.setup是所有Composition API(组合API)的“表演舞台”。

        3.组件中用到的：数据、方法等等，均要配置在setup中。

        4.setup函数的两种返回值：

                (1).若返回一个对象，则对象中的属性方法，在模板中均可以直接使用。（重点关注！）

                (2).若返回一个渲染函数，则可以自定义渲染内容。（了解）

        5.注意：

                (1).尽量不要用Vue2.x配置混用

                        (1.Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性和方法。

                        (2.但在setup中不能访问到Vue2.x配置（data、methods、computed...）。

                        (3.如果有重名，setup优先。

                (2)setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个promise实例，但需要Suspense和异步组件的配合）。

<template><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><button @click="sayHello">vue3函数</button><br><br><button @click="sayWelcome">vue2函数</button><br><br><button @click="towReadThree">Vue2读取Vue3</button><br><br><button @click="threeReadTow">Vue3读取Vue2</button>
</template><script>
import {h} from 'vue'
export default {name: 'App',data() {return {sex:'男'}},methods: {sayWelcome(){alert('欢迎学习Vue3！')},towReadThree(){console.log(this.name)console.log(this.age)console.log(this.sayHello)}},setup() {let name='张三'let age=18let sex='女'function sayHello(){alert('你好，Vue3！')}function threeReadTow(){console.log(this.sex)console.log(this.sayWelcome)console.log(this.towReadThree)}return {name,age,sex,sayHello,threeReadTow}//渲染函数// return () => h('h1','你好啊')}
}
</script>

 二、ref函数

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

        2.语法：const xxx = ref(initValue)

                (1).创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

                (2).JS中操作数据：xxx.value

                (3).模板中读取数据：不需要.value，直接<div>{{xxx}}</div>

        3.备注：

                (1).接收的数据可以是：基本类型、也可以是对象类型。

                (2).基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

                (3).对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数。

<template><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>职业：{{ obj.type }}</h2><h2>工资：{{ obj.salary }}</h2><button @click="sayHello">vue3函数</button><br><br>
</template><script>
import {ref} from 'vue'
export default {name: 'App',setup() {let name=ref('张三')let age=ref(18)let obj=ref({type:'前端工程师',salary:'30k'})function sayHello(){obj.value.type = 'UI设计师',obj.value.salary = '60k' console.log(obj)}return {name,age,obj,sayHello,}}
}
</script>

三、reactive函数

        1.作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）。

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

        3.reactive定义的响应式数据是“深层次的”。

        4.内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

<template><h1>一个人的信息</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>职业：{{ person.obj.type }}</h2><h2>工资：{{ person.obj.salary }}</h2><button @click="sayHello">vue3函数</button><br><br>
</template><script>
import {ref,reactive} from 'vue'
export default {name: 'App',setup() {let person =reactive({name:'张三',age:18,obj:{type:'前端工程师',salary:'30k'}})function sayHello(){person.name='李四'person.age = 40person.obj.type = 'UI设计师',person.obj.salary = '60k' }return {person,sayHello,}}
}
</script>

 四、reactive对比ref

        1.从定义数据角度对比：

                (1).ref用来定义：基本数据类型。

                (2).reactive用来定义：对象（或数组）类型数据。

                (3).备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

        2.从原理角度对比：

                (1).ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。

                (2).reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

        3.从使用角度对比：

                (1).ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

                (2).reactive定义的数据：操作数据预读取数据均不需要.value。