Vue3.0 一些总结【持续更新】-编程知识

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')