Vue3 开发实践

Iverson酱
243 阅读4分钟 
mindmap
      Vue3 新特性
          Composition API
          Hooks
          生命周期钩子
          Telepot
          Suspense
          Fragment
          TreeShaking

Vue3 对比 Vue2 变更

应用实例

  • Vue2 中每个组件里使用 this 都指向当前组件实例，this 上还包含了全局挂载的东西、路由、状态管理等
  • Vue3 组合式 API 中没有 this，如果想要类似的用法，有两种，一是获取当前组件实例，二是获取全局实例
<script setup>
import { getCurrentInstance } from 'vue'

// proxy 就是当前组件实例，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// global 就是全局实例
const global = appContext.config.globalProperties

global.name = 'zhizhi'
</script>

生命周期

vue2vue3
beforeCreatesetup(替代)
createdsetup(替代)
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured

ref 和 reactive

官方推荐：这两都是用于创建响应式对象，ref通常用于创建基础类型，reactive通常用于创建响应式

  • ref 如果传入的是引用类型，内部源码也是调用 reactive 来实现的
  • ref 返回的属性在 template 中可以直接使用，但是在 JS 中需要通过 .value 获取，如下。因为 ref 返回的是一个包装对象
<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const count = ref(1)

// 用法1
const arr = ref([])
console.log(arr.value) // []

// 用法2: 一个组件里所有的属性全部定义在一个对象里，有点 Vue2 data 的味道
const data = reactive({
    name: 'zhizhi',
    age: 3,
    ...
})
console.log(data.name) // zhizhi

// 用法3: 一个组件里 ref 和 reactive 两种都用
</script>

toRef 和 toRefs

这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性，如果不用这两直接解构的话是会丢失响应式效果

<script setup>
import { reactive, toRef, toRefs } from 'vue'

const data = reactive({
  name: 'zhizhi',
  age: 3
})

// 这样虽然能拿到 name / age，但是会变成普通变量，没有响应式效果了
const { name, age } = data

// 取出来一个响应式属性
const name = toRef(data, 'name')

// 这样解构出来的所有属性都是有响应式的
const { name, age } = toRefs(data)
</script>

watch

  • source: 可以支持 string, Object, Function, Array; 用于指定要侦听的响应式变量
  • callback: 执行的回调函数
  • options：支持 deep、immediate 和 flush 选项。
<script setup>
import { watch, ref, reactive } from 'vue'

const name = ref('zhizhi')
const data = reactive({
  age: 3,
  money: 0,
  children: []
})

// 监听 ref 属性
watch(name, (newName, oldName) => { ... })

// 监听其他属性、路由或者状态管理的都这样
watch(
  () => data.age, 
  (newAge, oldAge) => { ... }
)

// 监听多个属性，数组放多个值，返回的新值和老值也是数组形式
watch([data.age, data.money], ([newAge, newMoney], [oldAge, oldMoney]) => { ... })

// 第三个参数是一个对象，为可配置项，有5个可配置属性
watch(data.children, (newList, oldList) => { ... }, {
  // 这两个和 Vue2 一样
  immediate: true,
  deep: true,
  // 回调函数的执行时机，默认在组件更新之前调用。更新后调用改成post
  flush: 'pre', // 默认值是 pre，可改成 post 或 sync
  // 下面两个是调试用的
  onTrack (e) { debugger }
  onTrigger (e) { debugger }
})
</script>

在 watch 回调函数中能接收第三个参数 onInvalidate，为清除副作用的函数，首次触发监听的回调函数(handler)不会执行 onInvalidate，之后每次触发默认会先执行 onInvalidate

onInvalidate 的使用场景就是：比如监听的回调函数(handler)里有一些异步操作，当再次触发 watch 的时候可以用它来对前面未完成的异步任务执行取消/忽略/重置/初始化某些操作，比如取消上一次触发 watch 时未完成的请求

// 回调函数接收一个参数，为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
  console.log('沐华')
  // 获取DOM默认获取到的是更新前的dom，如果是flush: post，可以获取到更新后的dom
  console.log('DOM节点：', dom.innterHTML)
  onInvalidate(() => {
    console.log(2222)
  })
})

Vue3 中除了 watch 还增加了一个 watchEffect。区别是：

  • watch 是对传入的一个或多个值进行监听，触发时会返回新值和老值，且默认第一次不会执行
  • watchEffect 是传入一个立即执行函数，所以默认第一次就会执行，且不需要传入监听内容，会自动收集函数内的数据源作为依赖，当依赖发生变化时会重新执行函数，而且不会返回新值和老值
  • 清除副作用和副作用的刷新时机是一样的，区别是 watch 中会作为回调的第三个参数传入，watchEffect 中是回调函数的第一个参数
  • 正常情况下组件销毁/卸载后这两都会自动停止监听，但也有例外，比如异步的方式，在 setTimeout 里创建的监听就都需要手动停止监听，停止方式如下
// 监听方法赋值
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要停止监听的时候，手动调用停止监听
unwatch()
unwatchEffect()

vue3 组件通信

  • props + defineProps
  • defineEmits
  • defineExpose / ref 父组件获取子组件的属性或者调用子组件方法
  • useAttrs 包含父作用域里除 class 和 style 除外的非 props 属性集合
  • v-model(支持多个)
  • provide / inject
  • Pinia

Suspense

Vue 3中的Suspense组件使得在异步加载组件时可以更好地处理加载状态和错误状态。您可以在Suspense组件中定义fallback内容，用于在异步组件加载完成前展示一个加载状态。

<template> 
<Suspense> 
  <template #default> 
    <!-- 异步组件 -->
    <AsyncComponent /> 
  </template> 
  <template #fallback>
    <!-- 加载状态 --> 
    <LoadingSpinner /> 
  </template> 
</Suspense>
</template>

CSS 绑定 JS 变量

<template>
  <div class="name">zhizhi</div>
</template>

<script setup>
import { ref } from "vue"
const str = ref('#000')
</script>
<style scoped lang="scss">
.name {
  background-color: v-bind(str);
}
</style>

mixins

Vue2 中逻辑的抽离复用一般用 mixins，缺点有三：

  • 没有独立命名空间，mixins 会和组件内部产生命名冲突
  • 不去翻代码不知道引入的 mixins 里面有啥
  • 引入多个 mixins 时不知道自己使用的是来自哪一个 mixins 的
export default {
  mixins: [ a, b, c, d, e, f, g ],
  mounted() {
    console.log(this.name)
  }
}

const {nameRef，Fn} = useXX()

Vue3 中逻辑抽离复用的 hooks 语法，其实就是一个函数，可以传参，拿返回值来用。或者可以理解为：平时要封装公用的方法是怎么写。

Hooks

composition api

juejin.cn/post/689054…

官方解读:

cn.vuejs.org/guide/reusa…

hook库: vueuse.org/

请求策略库: alova.js.org/zh-CN/

avatar
文章
阅读
粉丝