Vue3 学习笔记 —— 自动导入 Vue3 APIs、v-model

最新推荐文章于 2024-08-09 08:20:09 发布

Lyrelion

最新推荐文章于 2024-08-09 08:20:09 发布

阅读量1.4k

点赞数

分类专栏： Vue3 文章标签： v-model

本文链接：https://blog.csdn.net/lyrelion/article/details/128172112

版权

Vue3 专栏收录该内容

24 篇文章 21 订阅

订阅专栏

1. 自动导入 Vue3 APIs —— unplugin-auto-import/vite

2. v-model

2.1 相较于 Vue2，Vue3 做出了哪些变化？

2.4 v-model 中的自定义修饰符 modelModifiers

2.4.1 父组件

2.4.2 子组件

2.5 v-model 源码分析 / emit 源码分析

2.5.1 v-model 源码分析

2.5.2 emit 源码分析

1. 自动导入 Vue3 APIs —— unplugin-auto-import/vite

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and RollupAuto import APIs on-demand for Vite, Webpack and Rollup - GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rolluphttps://github.com/antfu/unplugin-auto-import

Vue3 中的 APIs 无需导入，可直接使用

使用示例：

// 使用前
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

// 使用后
const count = ref(0)
const doubled = computed(() => count.value * 2)

安装命令：

npm i -D unplugin-auto-import

vite 配置：


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 注意：不能缺少 /vite
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue(), AutoImport({
    imports:['vue'],
    dts:"src/auto-import.d.ts"
  })]
})

2. v-model

v-model 是一个语法糖，通过 props + emit 组合而成

2.1 相较于 Vue2，Vue3 做出了哪些变化？

props：value -> modelValue；

emits：input -> update:modelValue；

v-bind 的 .sync 修饰符和组件的 model 选项已移除

新增支持多个v-model

新增支持自定义修饰符 Modifiers

2.2 绑定一个 v-model

2.2.1 父组件

在父组件中引入子组件，并给子组件添加 v-model 的绑定值 show

注意：此处的 v-model 只有一个，所以后面不用跟具体的名字，比如 v-model:title

<template>
  <button @click="show = !show">是否展示 -- {{ show }}</button>
  <Dialog v-model="show"></Dialog>
</template>
 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'

  const show = ref(false)
</script>

2.2.2 子组件

在子组件中定义 v-model 需要的 props：

如果没有定义名字（比如 v-model:title 表示有名字），则使用默认写法 —— modelValue

在子组件中定义 v-model 需要的 emits：

如果没有定义名字（比如 v-model:title 表示有名字），则使用默认写法 —— update:modelValue

<template>
     <div v-if='propData.modelValue'>
         <div class="dialog-header">
           <div @click="closeDialog">关闭按钮</div>
         </div>
         <div class="dialog-content">
            内容
         </div>
     </div>
</template>
 
<script setup lang='ts'>
  type Props = {
     modelValue:boolean
  }
 
  const propData = defineProps<Props>()
 
  const emit = defineEmits(['update:modelValue'])

  // 关闭事件
  const closeDialog = () => {
     // 双向绑定更新值
     emit('update:modelValue', false)
  }
</script>

2.3 绑定多个 v-model

2.3.1 父组件

在父组件中引入子组件，并给子组件添加 v-model 的绑定值 show

注意：此处的 v-model 有多个：

后面可以跟具体的名字，比如 v-model:title；
后面也可以不跟名字，使用默认值（只能有一个默认的 v-model）

<template>
  <button @click="show = !show">是否展示 -- {{ show }} -- {{ title }}</button>
  <Dialog v-model="show" v-model:title="dialogTitle"></Dialog>
</template>
 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'

  const show = ref(false)
  const dialogTitle = ref('弹框名字')
</script>

2.3.2 子组件

在子组件中定义 v-model 需要的 props：

如果没有定义名字，则使用默认写法 —— modelValue
如果有名字（比如 v-model:title），则这么写 —— title

在子组件中定义 v-model 需要的 emits：

如果没有定义名字，则使用默认写法 —— emit('update:modelValue', false)
如果有名字（比如 v-model:title），则这么写 —— emit('update:title','双向绑定改变 title')

<template>
     <div v-if='propData.modelValue'>
         <div class="dialog-header">
           <div @click="closeDialog">关闭按钮</div>
         </div>
         <div class="dialog-content">
            内容
         </div>
     </div>
</template>
 
<script setup lang='ts'>
  type Props = {
     modelValue: boolean,
     title: string,
  }
 
  const propData = defineProps<Props>()
 
  const emit = defineEmits(['update:modelValue', 'update:title'])

  // 关闭事件
  const closeDialog = () => {
     // 双向绑定更新值
     emit('update:modelValue', false)
     emit('update:title','双向绑定改变 title')
  }
</script>

2.4 v-model 中的自定义修饰符 modelModifiers

添加到 v-model 后边的修饰符，将通过 props 中的 modelModifiers 提供给组件

举个栗子~

在父组件中，定义了 v-model:title.islang，islang 就是自定义修饰符
在子组件的 props 中，通过 titleModifiers 属性接收并判断 —— 用户是否使用了自定义修饰符 islang，该 props 返回布尔值

2.4.1 父组件

在父组件中，给 v-model 添加修饰符 .islang —— v-model:title.islang

<template>
  <button @click="show = !show">是否展示 -- {{ show }} -- {{ title }}</button>
  <Dialog v-model="show" v-model:title.islang="dialogTitle"></Dialog>
</template>
 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'

  const show = ref(false)
  const dialogTitle = ref('弹框名字')
</script>

2.4.2 子组件

在子组件中，使用 titleModifiers 接收 v-model 修饰符，并在更新 title 值时，使用自定义修饰符，判断应该返回什么值

<script setup lang='ts'>
 
type Props = {
    modelValue: boolean,
    // 默认
    modelModifiers?: {
        default: () => {}
    }

    title?: string,
    // 自定义 名字+Modifiers 即可
    titleModifiers?: {
        default: () => {}
    }
 
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue', 'update:title'])
 
const closeDialog = () => {
    // 如果使用 v-model 时，传入了 islang，则返回 true，否则返回 false
    console.log(propData.titleModifiers); // true
 
    emit('update:modelValue', false)
    emit('update:title', propData.titleModifiers ? '有修饰符' : '没修饰符')
}

2.5 v-model 源码分析 / emit 源码分析

2.5.1 v-model 源码分析

源码位置：packages\runtime-dom\src\directives\vModel.ts

从源码位置可以看出，v-model 其实是个指令

首先，进行初始化赋值，v-model 绑定的值，赋值给 value，目前是单向的

  // set value on mounted so it's after min/max for type="range"
  mounted(el, { value }) {
    // 初始化赋值，v-model 绑定的值，赋值给 value，目前是单向的
    el.value = value == null ? '' : value
  },

created 中接收了三个参数：

el dom 对象
绑定（bing）对象
VNode

created(el, { modifiers: { lazy, trim, number } }, vnode) {
  el._assign = getModelAssigner(vnode)
  const castToNumber =
    number || (vnode.props && vnode.props.type === 'number')
    // 如果有 lazy 属性，则只有当数据改变并且失去焦点时，才会触发事件，相当于 change
    // 如果没有 lazy 属性，则相当于 input
  addEventListener(el, lazy ? 'change' : 'input', e => {
    if ((e.target as any).composing) return
    let domValue: string | number = el.value
    // 如果有 trim，则手动调用 trim() 去掉空格
    if (trim) {
      domValue = domValue.trim()
    }
    // 如果有数字，则转成数字
    if (castToNumber) {
      domValue = toNumber(domValue)
    }
    el._assign(domValue)
  })
  if (trim) {
    addEventListener(el, 'change', () => {
      el.value = el.value.trim()
    })
  }
  if (!lazy) {
    // 针对中文输入法进行特殊处理，当用户选择了输入法中的文字后，才会手动触发 input
    addEventListener(el, 'compositionstart', onCompositionStart)
    addEventListener(el, 'compositionend', onCompositionEnd)
    // Safari < 10.2 & UIWebView doesn't fire compositionend when
    // switching focus before confirming composition choice
    // this also fixes the issue where some browsers e.g. iOS Chrome
    // fires "change" instead of "input" on autocomplete.
    addEventListener(el, 'change', onCompositionEnd)
  }
},

2.5.2 emit 源码分析

源码位置：packages\runtime-core\src\componentEmits.ts

因为双向绑定不止通过 v-model，还要涉及到 emit

首先，读取当前实例的 props 对象

  // 读取当前实例的 props 对象
  const props = instance.vnode.props || EMPTY_OBJ

读取完 props 对象后，获取下 emits 中类似 update:title 的事件

  // 读取完 props 对象后，获取下 emits
  const isModelListener = event.startsWith('update:')

  // for v-model update:xxx events, apply modifiers on args
  // 去掉 update: 这段字符，获取后面的 modelValue
  const modelArg = isModelListener && event.slice(7)
  if (modelArg && modelArg in props) {
    const modifiersKey = `${
      modelArg === 'modelValue' ? 'model' : modelArg
    }Modifiers`
    // 获取 number、trim 
    const { number, trim } = props[modifiersKey] || EMPTY_OBJ
    if (trim) {
      args = rawArgs.map(a => a.trim())
    }
    if (number) {
      args = rawArgs.map(toNumber)
    }
  }

监听事件，并执行回调函数

  // handlerName + on + 事件名称
  let handlerName
  let handler =
    props[(handlerName = toHandlerKey(event))] ||
    // also try camelCase event handler (#2249)
    props[(handlerName = toHandlerKey(camelize(event)))]
  // for v-model update:xxx events, also trigger kebab-case equivalent
  // for props passed via kebab-case
  if (!handler && isModelListener) {
    handler = props[(handlerName = toHandlerKey(hyphenate(event)))]
  }

  if (handler) {
    callWithAsyncErrorHandling(
      handler,
      instance,
      ErrorCodes.COMPONENT_EVENT_HANDLER,
      args
    )
  }