一、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。