vue3 最佳实践
vue3 最佳实践
踩坑|2024-2-2|最后更新: 2024-4-15
vue
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item

基础功能

ref声明响应式状态

  • ref的作用是将基本类型转换为响应式对象。
  • 可以声明基本数据类型或对象类型，返回一个包含value属性的对象。
  • 在<script>里使用需要附加.value。
  • 在模板中会自动解包，不需要附加.value。

reactive声明响应式对象

  • reactive的作用是让对象的属性变成响应式的，可以在模板中直接使用。
  • 接受一个对象作为参数，返回一个响应式代理对象。
  • 只能声明引用型数据类型。
  • 不需要附加.value。
  • 不能重新赋值，否则会失去响应式。

refvs Reactive

推荐使用ref。
reactive
ref
✅ script 和 template 无差别
❌ script 中需要使用 .value
❌ 只支持对象和数组
✅ 任意类型
❌ 传递函数会丢失响应式
✅ 传递函数不会丢失响应式
✅ 直接返回属性
✅ 使用 .value 访问属性
❌ 解构丢失响应式
❌ 解构丢失响应式

computed 计算属性

computed 缓存计算属性值，
  • 懒计算：没有被引用不会计算。
  • 缓存属性：计算属性的值会被缓存，只有在相关依赖值改变时，才重新计算。

只读计算属性

默认创建的是一个只读的计算属性 ref

可写计算属性

Vue.js

watch监听

  • 需要显式声明响应式依赖
  • 默认初始化不会执行，配置参数immediate
  • 默认只会浅层监听，配置参数deep
  • 默认在组件更新前执行，配置参数flush
  • 函数返回值都是停止监听的函数
  • callback参数为新旧值，返回值为可清除副作用

监听getter函数

需要指向具体的属性

侦听一个 ref

侦听响应式对象时侦听器会自动启用深层模式。

watchEffect 监听副作用

  • 自动跟踪回调的响应式依赖
  • 初始化会执行
  • 不会深度监听
  • 默认在组件更新前执行，配置参数flush
  • 函数返回值都是停止监听的函数
  • callback无法获取旧值，返回值为可清除副作用

监听源

unref 解包

防止在一个非ref上调用.value会抛出一个运行时错误。
如果unref()的参数是一个ref，就会返回其内部值。否则就返回参数本身。这是的val = isRef(val) ? val.value : val语法糖。

toRefs 和 toRef解构响应式对象

用 toRefs() 和 toRef() 解构响应式对象，保持响应性。

readonly 返回一个只读的值

接受一个对象 (不论是响应式还是普通的)，返回一个原值的只读代理。

isRef 检查某个值是否为 ref。

provide +inject依赖注入

  • provide 在祖先组件提供值。接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
  • inject 在后代组件接收值。第一个参数是注入的 key。Vue 会查找最近组件的提供值 。

父组件

子组件

子组件调用父组件

  • props
  • 依赖注入
  • 状态管理

父组件调用子组件

子组件里定义一个方法，并使用defineExpose将其导出。父组件里将子组件通过ref 来拿到子组件上的方法。
子组件
父组件
 

生命周期

组件

  • onUpdated 响应状态变更而更新DOM树之后
  • onUnmounted 组件实例被卸载之后
  • onBeforeMount 组件被挂载之前
  • onBeforeUnmount 组件实例被卸载之前

错误

  • onErrorCaptured 捕获了后代组件传递的错误时调用

调试

  • onRenderTracked 组件渲染过程中追踪到响应式依赖时
  • onRenderTriggered 响应式依赖的变更触发了组件渲染时

SSR

  • onServerPrefetch 组件实例在服务器上被渲染之前（SSR only）

keepAlive

  • onActivated 缓存组件被插入到DOM中时调用
  • onDeactivated 当缓存组件从DOM中被移除时调用
 

指令

v-text 更新元素的文本内容

v-html 更新元素的html内容

注意：在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
 

v-show 按条件改变元素的可见性

  • v-show 根据条件切换元素上css的 display 属性，来改变元素可见性。
  • v-show 始终会被渲染元素。

v-if 按条件渲染元素

  •  v-if 根据条件判断是否渲染元素
 

v-if vs. v-show

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
 

v-on 给元素绑定事件

缩写：@
  • 修饰符
    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .capture - 在捕获模式添加事件监听器。
    • .self - 只有事件从元素本身发出才触发处理函数。
    • .{keyAlias} - 只在某些按键下触发处理函数。
    • .once - 最多触发一次处理函数。
    • .left - 只在鼠标左键事件触发处理函数。
    • .right - 只在鼠标右键事件触发处理函数。
    • .middle - 只在鼠标中键事件触发处理函数。
    • .passive - 通过 { passive: true } 附加一个 DOM 事件。
 

v-bind 组件绑定属性

  • 缩写： :
  • 用于给组件绑定属性值，可动态绑定一个或多个attribute，也可以是组件prop

v-model 双向数据绑定

在表单输入元素或组件上创建双向绑定。

仅限：

  • <input>
  • <select>
  • <textarea>
  • components

修饰符

  • .lazy - 监听 change 事件而不是 input
  • .number - 将输入的合法字符串转为数字
  • .trim - 移除输入内容两端空格

多个v-model 绑定

父组件
子组件

v-slot 作用域插槽

  • 缩写：#
  • 父组件用v-slot 定义一个或多个具名插槽的内容
  • 子组件使用slot 组件来定义的插槽位置，并显示父组件定义的内容。
父组件
子组件
渲染结果
notion image
 

v-pre 跳过该元素及其所有子元素的编译

跳过对当前元素及其子元素的编译过程。直接输出元素的原始内容。
 
渲染结果
notion image

css 相关

scoped 作用域限制

当前样式只在当前文件/组件的作用域下生效

:deep 深度渗透

在scoped的模式下，使用 :deep 来实现父组件的样式影响到子组件。

:slotted 插槽样式

默认情况下，作用域的样式是不会影响到子组件，包括<slot/> 的组件，可以使用 :slotted 给插槽的内容添加样式。

:global 全局样式

样式应用于全局

混合使用局部样式和全局样式

动态样式

  • 动态style样式
  • 动态class样式
  • v-bind：将js中的变量的值应用于css中，变量值一般用小写单词表示
 
组件库支持按需加载前端模块化输出
Loading...