【vue3+typescript高仿知乎】项目学习笔记（三）——Vue3篇

一、vue3 新特性巡礼

    vue3发布有一段时间了，作为一名前端开发爱好者，当让不能错过这一盛世，乘着现在事件充裕，赶紧提升一下个人的专业技能，紧跟时代的潮流☺。
    vue有一个最大的特性---渐进性，因此vue3也包含vue2的绝大部分的方法，习惯于vue2开发的小伙伴也能继续在vue3中使用。官方花费大力气重写vue之后，提升了哪些新能呢？可以看一下如下这张图：

1. 新能提升

image.png

2. Composition API

image.png

3. 其他新增特性

image.png

4. 更好的TypeScript支持

二、vue3基础语法

ref：定义响应式变量，具体用法如下任何类型皆可

import { ref } from 'vue'
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

在template使用如下，此时不需要.value获取对应的值

reactive：定义响应式对象或数组，具体用法如下：

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}

  {{ state.count }}

reactive的局限性

① 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
② 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失：

let state = reactive({ count: 0 })

// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！）
state = reactive({ count: 1 })

同时这也意味着当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性：

const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state
n++

// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字，并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)

toRefs：将reactive定义的变量转成ref格式的数据，方便template使用
不用toRefs的情况：

image.png

image.png

可以发现在html中有多个data，写到这我们可能会想到解构到本地变量，修改如下：

image.png

image.png

会发现没有任何效果，这是因为

reactive局限性中的第一条只有对象、数组和 Map、Set 这样的集合类型有效，其他类型无用，因此官方推出一个toRefs，代码如下：

image.png

生命周期

image.png

侦测变化--watch

image.png

如果想监听多个元素时，可以使用数组的形式，如下：

image.png

这个地方需要注意，如果我们使用reactive定义变量时，且我们想监听其中的一项，而不是监听整个对象的情况，如下：

image.png

此时浏览器回出现如下问题：

image.png

这是因为watch的必须是一个响应式对象、数组格式，因此改成如下方式即可：

image.png

三、全局API修改

image.png

image.png

image.png

image.png

四、总结

    其实vue3还很多的新特性，如：Teleport、Suspense等等，这里不方便详细叙述的，推荐大家去看看2022全面升级. Vue3 + TS 仿知乎专栏企业级项目，里面老师讲解的非常详细，这里仅供参考，谢谢