脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue v-model原理

vue3中v-model的原理示例详解

 更新时间：2025年04月29日 09:50:27   作者：flying robot  
原生 JavaScript 实现,模拟 Vue 3 的 v-model 功能,包括表单元素和组件支持,我们将逐步构建代码,并提供使用示例,对vue v-model原理解析感兴趣的朋友一起看看吧

模拟 Vue 3 的完整 v-model 功能，我们需要实现以下特性：**

  • 表单元素的双向绑定：支持 、、 等表单元素，包括修饰符（如 .lazy、.number、.trim）。
  • 自定义组件的双向绑定：支持 v-model 在组件上的使用，基于 modelValue 和 update:modelValue，并支持多重 v-model（如 v-model:name）。
  • 自定义修饰符：支持组件上的自定义修饰符（如 v-model.capitalize）。
  • 响应式系统：实现一个简化的响应式系统，模拟 Vue 3 的 ref 或 Proxy 行为，确保数据变化触发视图更新。

原生 JavaScript 实现，模拟 Vue 3 的 v-model 功能，包括表单元素和组件支持。我们将逐步构建代码，并提供使用示例。**

实现步骤

1. 响应式系统（模拟 ref）

我们需要一个简单的响应式系统，类似于 Vue 3 的 ref，用于创建响应式数据并在数据变化时通知依赖。

javascript

// 定义 Dep 对象，用于依赖收集
let Dep = {
 target: null // 当前依赖的回调函数
};
// 模拟 Vue 3 的 ref
function ref(initialValue) {
  const deps = new Set();
  let _value = initialValue;
  return {
    get value() {
      // 依赖收集
      if (typeof Dep.target === 'function') {
        deps.add(Dep.target);
      }
      return _value;
    },
    set value(newValue) {
      if (_value !== newValue) {
        _value = newValue;
        // 通知依赖
        deps.forEach((dep) => dep());
      }
    }
  };
}
// 依赖收集的全局变量
Dep.target = null;
// 模拟 watchEffect，用于依赖收集
function watchEffect(callback) {
  Dep.target = callback;
  callback();
  Dep.target = null;
}
  • ref 创建响应式数据，getter 收集依赖，setter 通知依赖更新。
  • watchEffect 模拟 Vue 的依赖收集机制，执行回调并收集依赖。

2. 表单元素的 v-model

表单元素的 v-model 是 :value 和 @input（或 @change）的语法糖。我们需要：

  • 绑定响应式数据到元素的 value（或 checked）。
  • 监听输入事件，更新响应式数据。
  • 支持修饰符（如 .lazy、.number**、.trim）。**

javascript

// 处理修饰符逻辑
function applyModifiers(value, modifiers) {
  let result = value;
  if (modifiers.number) {
    result = isNaN(Number(result)) ? result : Number(result);
  }
  if (modifiers.trim && typeof result === 'string') {
    result = result.trim();
  }
  return result;
}
// 表单元素的 v-model
function vModelForm(element, reactiveRef, modifiers = {}) {
  const tag = element.tagName.toLowerCase();
  const type = element.type;
  // 确定事件类型
  const eventName = modifiers.lazy
    ? 'change'
    : tag === 'select' || type === 'checkbox' || type === 'radio'
      ? 'change'
      : 'input';
  // 更新视图
  const updateView = () => {
    if (type === 'checkbox') {
      element.checked = reactiveRef.value;
    } else if (type === 'radio') {
      element.checked = reactiveRef.value === element.value;
    } else {
      element.value = reactiveRef.value;
    }
  };
  // 初始绑定和依赖收集
  Dep.target = updateView;
  updateView();
  Dep.target = null;
  // 监听输入事件
  element.addEventListener(eventName, (event) => {
    let newValue;
    if (type === 'checkbox') {
      newValue = event.target.checked;
    } else if (type === 'radio') {
      if (event.target.checked) {
        newValue = event.target.value;
      } else {
        return; // 未选中时不更新
      }
    } else {
      newValue = event.target.value;
    }
    // 应用修饰符
    newValue = applyModifiers(newValue, modifiers);
    reactiveRef.value = newValue;
  });
  // 数据变化时更新视图
  reactiveRef.deps = reactiveRef.deps || new Set();
  reactiveRef.deps.add(updateView);
}
  • 修饰符处理：applyModifiers 处理 .number 和 .trim 修饰符。
  • 事件选择：根据元素类型（checkbox、radio、select）或修饰符（.lazy）选择 input 或 change 事件。
  • 视图更新：根据元素类型更新 value 或 checked。
  • 事件监听：根据元素类型获取用户输入的值，并应用修饰符后更新响应式数据。

3. 自定义组件的 v-model

组件的 v-model 基于 modelValue 和 update:modelValue，支持多重 v-model 和自定义修饰符。我们模拟组件为一个简单的 DOM 结构，包含子组件逻辑。

javascript

// 模拟组件的 v-model
function vModelComponent(element, reactiveRef, propName = 'modelValue', modifiers = {}) {
  // 模拟组件的 props 和 emit
  const props = { [propName]: reactiveRef.value };
  const emit = (eventName, value) => {
    if (eventName === `update:${propName}`) {
      // 应用修饰符
      let newValue = value;
      if (modifiers.capitalize && typeof newValue === 'string') {
        newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
      }
      reactiveRef.value = newValue;
    }
  };
  // 更新视图
  const updateView = () => {
    element.value = reactiveRef.value; // 模拟组件内部 input 的 value
  };
  // 初始绑定
  Dep.target = updateView;
  updateView();
  Dep.target = null;
  // 模拟组件内部的 input 事件
  element.addEventListener('input', (event) => {
    emit(`update:${propName}`, event.target.value);
  });
  // 数据变化时更新视图
  reactiveRef.deps = reactiveRef.deps || new Set();
  reactiveRef.deps.add(updateView);
}
  • props 和 emit：模拟组件的 props（如 modelValue）和 $emit（如 update:modelValue）。
  • 多重 v-model：通过 propName 支持自定义属性（如 name、age）。
  • 修饰符：支持自定义修饰符（如 .capitalize），在 emit 时处理。
  • 视图更新：模拟组件内部的 ，绑定 value 并监听 input 事件。

4. 统一的 v-model 接口

创建一个统一的 vModel 函数，根据上下文（表单元素或组件）调用不同的实现。

javascript

function vModel(element, reactiveRef, options = {}) {
  const { modifiers = {}, propName } = options;
  const isComponent = propName || element.tagName.toLowerCase() === 'custom-component';
  if (isComponent) {
    vModelComponent(element, reactiveRef, propName || 'modelValue', modifiers);
  } else {
    vModelForm(element, reactiveRef, modifiers);
  }
}
  • 选项：modifiers 指定修饰符，propName 指定组件的绑定属性。
  • 上下文判断：根据 propName 或元素标签判断是表单元素还是组件。

5. 完整代码与使用示例

javascript

// 定义 Dep 对象，用于依赖收集
const Dep = {
  target: null, // 当前依赖的回调函数
};
// 模拟 Vue 3 的 ref
function ref(initialValue) {
  const deps = new Set();
  let _value = initialValue;
  return {
    get value() {
      // 依赖收集
      if (typeof Dep.target === 'function') {
        deps.add(Dep.target);
      }
      return _value;
    },
    set value(newValue) {
      if (_value !== newValue) {
        _value = newValue;
        // 通知依赖
        deps.forEach((dep) => dep());
      }
    },
  };
}
// 模拟 watchEffect，用于依赖收集
function watchEffect(callback) {
  Dep.target = callback;
  callback();
  Dep.target = null;
}
// 处理修饰符逻辑
function applyModifiers(value, modifiers) {
  let result = value;
  if (modifiers.number) {
    result = isNaN(Number(result)) ? result : Number(result);
  }
  if (modifiers.trim && typeof result === 'string') {
    result = result.trim();
  }
  return result;
}
// 表单元素的 v-model
function vModelForm(element, reactiveRef, modifiers = {}) {
  const tag = element.tagName.toLowerCase();
  const type = element.type;
  const eventName = modifiers.lazy
    ? 'change'
    : tag === 'select' || type === 'checkbox' || type === 'radio'
      ? 'change'
      : 'input';
  const updateView = () => {
    if (type === 'checkbox') {
      element.checked = reactiveRef.value;
    } else if (type === 'radio') {
      element.checked = reactiveRef.value === element.value;
    } else {
      element.value = reactiveRef.value;
    }
  };
  Dep.target = updateView;
  updateView();
  Dep.target = null;
  element.addEventListener(eventName, (event) => {
    let newValue;
    if (type === 'checkbox') {
      newValue = event.target.checked;
    } else if (type === 'radio') {
      if (event.target.checked) {
        newValue = event.target.value;
      } else {
        return;
      }
    } else {
      newValue = event.target.value;
    }
    newValue = applyModifiers(newValue, modifiers);
    reactiveRef.value = newValue;
  });
  reactiveRef.deps = reactiveRef.deps || new Set();
  reactiveRef.deps.add(updateView);
}
// 组件的 v-model
function vModelComponent(
  element,
  reactiveRef,
  propName = 'modelValue',
  modifiers = {},
) {
  const props = { [propName]: reactiveRef.value };
  const emit = (eventName, value) => {
    if (eventName === `update:${propName}`) {
      let newValue = value;
      if (modifiers.capitalize && typeof newValue === 'string') {
        newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
      }
      reactiveRef.value = newValue;
    }
  };
  const updateView = () => {
    element.value = reactiveRef.value;
  };
  Dep.target = updateView;
  updateView();
  Dep.target = null;
  element.addEventListener('input', (event) => {
    emit(`update:${propName}`, event.target.value);
  });
  reactiveRef.deps = reactiveRef.deps || new Set();
  reactiveRef.deps.add(updateView);
}
// 统一 v-model 接口
function vModel(element, reactiveRef, options = {}) {
  const { modifiers = {}, propName } = options;
  const isComponent =
    propName || element.tagName.toLowerCase() === 'custom-component';
  if (isComponent) {
    vModelComponent(element, reactiveRef, propName || 'modelValue', modifiers);
  } else {
    vModelForm(element, reactiveRef, modifiers);
  }
}
// 使用示例
// 创建 DOM 元素
const inputText = document.createElement('input');
inputText.placeholder = '输入文本';
const inputNumber = document.createElement('input');
inputNumber.type = 'number';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
const select = document.createElement('select');
select.innerHTML = `
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
 `;
const customComponent = document.createElement('input'); // 模拟组件
customComponent.placeholder = '自定义组件输入';
// 添加到页面
document.body.appendChild(inputText);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(inputNumber);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(checkbox);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(select);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(customComponent);
// 创建响应式数据
const message = ref('Hello');
const number = ref(42);
const checked = ref(false);
const selected = ref('option1');
const componentName = ref('alice');
const componentAge = ref(25);
// 绑定 v-model
vModel(inputText, message, { modifiers: { trim: true } });
vModel(inputNumber, number, { modifiers: { number: true } });
vModel(checkbox, checked);
vModel(select, selected);
vModel(customComponent, componentName, {
  propName: 'name',
  modifiers: { capitalize: true },
});
// 模拟多重 v-model
const componentAgeInput = document.createElement('input');
componentAgeInput.type = 'number';
document.body.appendChild(document.createElement('br'));
document.body.appendChild(componentAgeInput);
vModel(componentAgeInput, componentAge, {
  propName: 'age',
  modifiers: { number: true },
});
// 打印数据变化
watchEffect(() => {
  console.log('message:', message.value);
  console.log('number:', number.value);
  console.log('checked:', checked.value);
  console.log('selected:', selected.value);
  console.log('componentName:', componentName.value);
  console.log('componentAge:', componentAge.value);
});
// 程序化更新数据
setTimeout(() => {
  message.value = 'Updated Text';
  componentName.value = 'bob';
}, 2000);

执行流程图

初始化:
  定义 Dep, ref, vModel 等
  创建 DOM 元素 -> 添加到页面
  创建 ref 数据 (message, number, ...)
  vModel 绑定:
    -> vModelForm 或 vModelComponent
       -> 确定事件 (input/change)
       -> 定义 updateView
       -> 初始更新 DOM (触发 getter, 收集 updateView)
       -> 绑定事件监听
       -> 添加 updateView 到 deps
  watchEffect:
    -> 打印初始值 (触发 getter, 收集 watchEffect)
  设置定时器
用户交互 (例如输入 " Hello Vue "):
  input 事件 -> 获取值 " Hello Vue "
  applyModifiers (.trim) -> "Hello Vue"
  message.value = "Hello Vue" -> setter
    -> 更新 _value
    -> 通知 deps:
       -> updateView: inputText.value = "Hello Vue"
       -> watchEffect: 打印所有数据
程序化更新 (2秒后):
  message.value = 'Updated Text' -> setter
    -> 更新 _value
    -> 通知 deps:
       -> updateView: inputText.value = 'Updated Text'
       -> watchEffect: 打印数据
  componentName.value = 'bob' -> setter
    -> 更新 _value
    -> 通知 deps:
       -> updateView: customComponent.value = 'bob'
       -> watchEffect: 打印数据

到此这篇关于vue3中v-model的原理示例的文章就介绍到这了,更多相关vue v-model原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    在做电商项目的时候需要添加修改收货地址,如何实现三级联动选取省市区地址困扰了我不少时间,这篇文章主要给大家介绍了关于利用vue+elementUI设置省市县三级联动下拉列表框的相关资料,需要的朋友可以参考下
    2022-08-08
  • 浅析Vue3中useRouter怎么在Vue组件外使用

    浅析Vue3中useRouter怎么在Vue组件外使用

    useRouter 是 Vue 3 Composition API 中的钩子（hook）,它只能在 Vue 组件中使用,本文主要来和大家探讨一下如何让他在组件外使用,感兴趣的可以了解下
    2024-11-11
  • Vue3在router中使用pinia报错的简单解决办法

    Vue3在router中使用pinia报错的简单解决办法

    这篇文章主要给大家介绍了关于Vue3在router中使用pinia报错的简单解决办法,什么是pinia,可以理解为状态管理工具,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 使用Bootstrap4 + Vue2实现分页查询的示例代码

    使用Bootstrap4 + Vue2实现分页查询的示例代码

    本篇文章主要介绍了使用Bootstrap4 + Vue2实现分页查询的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 通过debug搞清楚.vue文件如何变成.js文件(案例详解)

    通过debug搞清楚.vue文件如何变成.js文件(案例详解)

    这篇文章主要介绍了通过debug搞清楚.vue文件如何变成.js文件,本文以@vitejs/plugin-vue举例,通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的,需要的朋友可以参考下
    2024-07-07
  • 在Vue中实现Excel导出功能(数据导出)

    在Vue中实现Excel导出功能(数据导出)

    本文分享了如何在前端导出Excel文件,强调了前端导出的即时性、便捷性、灵活性和定制化优势,以及减轻后端服务器负担的特点,详细介绍了ExcelJS和FileSaver.js两个工具库的使用方法和主要功能,最后通过Vue实现了Excel的导出功能
    2024-10-10
  • Vue自定义v-has指令,做按钮权限判断的步骤

    Vue自定义v-has指令,做按钮权限判断的步骤

    这篇文章主要介绍了Vue自定义v-has指令,做按钮权限判断的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • vue中传参params和data的区别

    vue中传参params和data的区别

    本文主要介绍了vue中传参params和data的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue.js性能优化N个技巧(值得收藏)

    Vue.js性能优化N个技巧(值得收藏)

    本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧
    2021-09-09
  • 一文搞懂vue中provide和inject实现原理对抗平庸

    一文搞懂vue中provide和inject实现原理对抗平庸

    这篇文章主要为大家介绍了vue中provide和inject实现原理的深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04

最新评论