Vue3基础知识-1

setup函数

官方文档
setup函数的参数，主要有两个：props和context

• props: 父组件传过来的属性会被放到props对象中，如果需要在setup函数中使用，可通过props参数获取，规则和vue2一致。
• context，包含三个参数：
  • attrs: 所有的非prop的attribute
  • slots: 父组件传递过来的插槽（这个在渲染函数返回时会有用）
  • emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过this.$emit发出事件）

<template>
  <div>
    <!-- template会自动将ref解包 -->
    <h1>{
   {
   count}}</h1>
    <button @click="increase">+1</button>
  </div>
</template>

<script>
import {
    ref } from 'vue'
export default {
   
  setup() {
   
    let count = ref(0);
    const increase = () => {
   
      console.log(count);
      count.value++
    }
    return {
   
      count,
      increase
    }
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

响应式API

reactive()

返回一个对象的响应式代理，通常用于复杂类型，比如：对象、数组。如果用于基本类型，会发出警告。
为什么使用reactive会变成响应式呢？
原因：当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集。当数据发生改变时，所以收集到的依赖都是进行对应的响应式操作。事实上，我们编写的data属性，也是在内部交给了reactive函数将其编程响应式对象的。

const count = ref(1)
const obj = reactive({
    count })

// ref 会被解包
console.log(obj.count === count.value) // true

// 会更新 `obj.count`
count.value++
console.
1
2
3
4
5
6
7
8
9