Vue3-setup用法详解（会持续完善）

组合式API setup

定义响应式常量和数组

1、简单定义一个常量0，

import { ref } from "vue";
let num = ref(0);
console.log(num.value);        //0

修改其值

num.value = 4

2、定义一个数组

import { ref } from "vue";
let arr = ref([])
console.log(arr.value)
arr.value.push(1)
console.log(arr.value)     //Proxy {0: 1}

3、定义一个对象

let person = reactive({})
console.log(person.value);       //Proxy

与上面不同的是这边是直接引用，不用通过value

// 这种写法倾向与对对象内部的改变
let person = reactive({name:'li'})
console.log(person);       //Proxy {name: 'li'}

ref和reactive的区别

1. ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
2. reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换
3. **推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担
   摘自：此段话原文章链接

计算属性computed

 // 计算属性，使用计算函数并命名，然后在 return 中导出即可
    const bigCount = computed(() => {
      return count.value * 10
})

获取Dom元素

 <h1 ref="person"> hello </h1>

获取元素 person 对照

const person = ref(null)
console.log(person.value)    // <h1 ref="person"> hello </h1>

不是setup单文件的写法，需要导出person就可以了

结合VueX

import { useStore } from "vuex";
const store = useStore()
 store.commit("increaseCount")

结合route、router

import {useRoute,useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()

下面就可以使用route和router