Vue3.0 一些总结【持续更新】

1. `reactive` 只适用于对象 (包括数组和内置类型，如 Map 和 Set，它不支持如 string、number 或 boolean 这样的原始类型)

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

注意：不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，必须始终保持对响应式对象的相同引用。不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

js
let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })
对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

js
const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

解构时也会失去响应式，可以使用toRefs 去转成响应式

2. `toRefs`

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
消费者组件可以解构/展开返回的对象而不会失去响应性

const state = reactive({
  foo: 1,
  bar: 2
})
return {
	...toRefs(state)
}

注意：toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef。

3. `ref()` 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

4. `computed`

接受一个 getter 函数，返回一个只读的响应式 ref 对象

  const count = ref(1)
  const plusOne = computed(() => count.value + 1)
  console.log(plusOne.value) // 2

也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

5. 路由独享守卫 `beforeEnter`

  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: (to, form, next) => { // 路由独享守卫
      console.log(to, '路由独享守卫');
      next()
    }
  },

6. 得到路由信息 vue3/vue2 区别

vue3
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    let router = useRouter(); // router是全局路由实例，是VueRouter实例  
    let route = useRoute(); // route对象表示当前的路由信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录
    console.log(router, route, 'router')
   	router.push('/home') //路由跳转
   	 }
   }


vue2
this.$route.params
this.$router.push({
	path: '/home'
	params: {id: 1}
})
this.$route.query
this.$router.push({
	path: '/home'
	query: {id: 1}
})

7. `ref()` 获取dom

<template>
  <div class="home">
    <input type="text" ref="input">
  </div>
</template>

import { ref } from "vue";

const input = ref();
console.log(input, 'input')