首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue v-model原理

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

2025-04-29 09:50:28 作者：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原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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

实现步骤

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

2. 表单元素的 v-model

3. 自定义组件的 v-model

4. 统一的 v-model 接口

5. 完整代码与使用示例

您可能感兴趣的文章: