一、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=18
let 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 = 40
person.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。