Vue3

Vue3
Setup
- setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）
- setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
- 执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
- 与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用)
- 使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态
参考文档
props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

参考文档
context

传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值

参考文档
- https://v3.cn.vuejs.org/guide/composition-api-setup.html#context
- https://www.jianshu.com/p/44e60f0c681a
Provide

参考文档
Inject

参考文档
ref

ref 是一个函数，它接受一个参数，返回的就是一个神奇的响应式对象。我们初始化的这个 0 作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的相应。
```
<template>
  <h1>{{count}}</h1>
  <h1>{{double}}</h1>
  <button @click="increase">+1</button>
</template>

import { ref } from "vue"

setup() {
  // ref 是一个函数，它接受一个参数，返回的就是一个神奇的 响应式对象 。我们初始化的这个 0 作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的相应。
  const count = ref(0)
  const double = computed(() => {
    return count.value * 2
  })
  const increase = () => {
    count.value++
  }
  return {
    count,
    increase,
    double
  }
}
```
参考文档
- https://vue3js.cn/reactivity/ref.html
- https://v3.cn.vuejs.org/guide/composition-api-introduction.html#带-ref-的响应式变量
computed

参考文档
reactive

参考文档
- https://vue3js.cn/vue-composition-api/#reactive
- https://vue3js.cn/reactivity/reactive.html
使用 ref 还是 reactive 可以选择这样的准则
- 第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
- 第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。
```
import { ref, computed, reactive, toRefs } from 'vue'

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

setup() {
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}
```
toRefs

参考文档
生命周期钩子函数
```
import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
}
```
参考文档
watch
```
// watch 简单应用
watch(data, () => {
  document.title = 'updated ' + data.count
})
// watch 的两个参数，代表新的值和旧的值
watch(refData.count, (newValue, oldValue) => {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated ' + data.count
})

// watch 多个值，返回的也是多个值的数组
watch([greetings, data], (newValue, oldValue) => {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})

// 使用 getter 的写法 watch reactive 对象中的一项
watch([greetings, () => data.count], (newValue, oldValue) => {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})
```
参考文档
defineComponent

参考文档
- https://vue3js.cn/global/defineComponent.html
- https://juejin.cn/post/6994617648596123679
vue3 +Ts vsCode 报错处理

使用 // @ts-ignore 隐藏文件中的报错
https://blog.csdn.net/qq_43869822/article/details/121637066
```
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { defineComponent, ref, reactive } from "vue";
```
本文参考文档
- http://docs.vikingship.xyz/vue3-basic.html
作者：德乌姆列特

出处：https://www.cnblogs.com/Dewumu/

本博客所有文章仅用于学习、研究和交流目的，欢迎非商业性质转载。

博主的文章没有高度、深度和广度，只是凑字数。由于博主的水平不高，不足和错误之处在所难免，希望大家能够批评指出。

博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章，请原谅博主成为一个无耻的文档搬运工！
相关阅读:
自定义vue必填验证指令
 福珑2日常存活策略
 树莓派系统安装和配置 WiringPi
代码实现RabbitMQ死信队列的创建
 博客已经搬家
 浅谈PHP序列化与反序列化
 prometheus监控golang服务实践
 ETCD核心机制解析
 N1BOOK 记录
 利用Ubuntu虚拟机制作F2FS文件系统镜像
原文地址：https://www.cnblogs.com/Dewumu/p/16037521.html

Setup

参考文档

props

参考文档

context

参考文档

Provide

参考文档

Inject

参考文档

ref

computed

reactive

toRefs

生命周期钩子函数

watch

defineComponent

vue3 +Ts vsCode 报错 处理

本文参考文档

vue3 +Ts vsCode 报错处理