vue3常用 Composition API
作者：互联网
1.拉开序幕的setup
-
理解：Vue3.0中一个新的配置项，值为一个函数。
-
setup是所有Composition API（组合API）“ 表演的舞台 ”。
-
组件中所用到的：数据、方法等等，均要配置在setup中。
-
setup函数的两种返回值：
-
若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
-
若返回一个渲染函数：则可以自定义渲染内容。（了解）
-
-
注意点：
-
尽量不要与Vue2.x配置混用
-
Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
-
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
-
如果有重名, setup优先。
-
-
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
1 <template>
2 <h1>一个人的信息</h1>
3 <h1>姓名：{{name}}</h1>
4 <h1>年龄：{{age}}</h1>
5 <h1>工作种类：{{job.type}}</h1>
6 <h1>工作薪水：{{job.salary}}</h1>
7 <button @click="changeInfo">修改个人信息</button>
8 </template>
9
10 <script>
11 import {ref} from 'vue'
12 export default {
13 name: 'App',
14 setup(){
15 let name = ref("张三")
16 let age = ref(18)
17 let job = ref({
18 type: '前端工程师',
19 salary: '30k'
20 })
21
22 function changeInfo() {
23 name.value = '李四'
24 age.value = 48
25 job.value.type = 'UI设计师'
26 job.value.salary = '35k'
27 }
28 return {
29 name,
30 age,
31 job,
32 changeInfo
33 }
34 }
35 }
36 </script>
2.ref函数
-
作用: 定义一个响应式的数据
-
语法:
const xxx = ref(initValue)-
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
-
JS中操作数据：
xxx.value -
模板中读取数据: 不需要.value，直接：
<div>{{xxx}}</div>
-
-
备注：
-
接收的数据可以是：基本类型、也可以是对象类型。
-
基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的。 -
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive函数。
-
3.reactive函数
-
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用
ref函数） -
语法：
const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） -
reactive定义的响应式数据是“深层次的”。
-
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
1 <template>
2 <h1>一个人的信息</h1>
3 <h1>姓名：{{name}}</h1>
4 <h1>年龄：{{age}}</h1>
5 <h1>工作种类：{{job.type}}</h1>
6 <h1>工作薪水：{{job.salary}}</h1>
7 <button @click="changeInfo">修改个人信息</button>
8 </template>
9
10 <script>
11 import {ref, reactive} from 'vue'
12 export default {
13 name: 'App',
14 setup(){
15 let name = ref("张三")
16 let age = ref(18)
17 let job = reactive({
18 type: '前端工程师',
19 salary: '30k'
20 })
21
22 function changeInfo() {
23 name.value = '李四'
24 age.value = 48
25 job.type = 'UI设计师'
26 job.salary = '35k'
27 }
28 return {
29 name,
30 age,
31 job,
32 changeInfo
33 }
34 }
35 }
36 </script>
标签：name,对象,setup,value,job,API,vue3,ref,Composition 来源： https://www.cnblogs.com/guwufeiyang/p/15845917.html