v-model原理(简易源码版)

v-model原理(简易源码版)

作用与机制的分析
双向数据绑定机制

v-model 是 Vue.js 中用于实现双向数据绑定的关键指令，它使得表单输入元素（如 input、textarea、select 等）的值能够与 Vue 实例的数据属性自动保持同步。
双向数据绑定意味着当用户在表单元素上进行交互（如输入文本、选择选项等）时，Vue 实例对应的 data 属性会立即更新；反之，如果 data 属性的值发生变化，表单元素的显示值也会相应更新。

v-model 的语法糖解析

v-model 在底层实际上是以下两部分行为的封装：
数据绑定（v-bind:value）：将 Vue 实例中指定的数据属性（如 msg）绑定到表单元素的 value 属性（对于 checkbox 和 radio 类型，可能绑定的是 checked 属性）。这样，初始时表单元素会显示对应数据属性的值。
分析
由于v-model是指令,所以我们可以使用Vue给我们提供的自定义指令的方法Vue.directive()
使用自定义指令里面提供的bind方法,在这里主要是对绑定的元素进行绑定事件
由于一般只有表单元素会和用户进行交互,所以这里就只对表单元素进行绑定,初次绑定之后,
比如:文本框绑定的input事件,select绑定的是change事件

3.先使用 el.value = vm[binding.expression]将一开始在data绑定的值给表单的初始值(value)
4.然后给相对应的表单添加对应的响应事件
5.在响应事件函数回调中修改绑定的变量值,值为当前的表单的值,现在初始化
完成了,也做到了页面的值和data的值一样了,但是还有一个问题没解决,就是在改变data里面的值的时候怎么做到让页面的值更改
6.使用update监听该指令绑定的值是否改变,改变的时候 **el.value = vnode.context[binding.expression];**将页面的值替换为data的值

// 定义一个名为 “my-model” 的自定义指令，实现类似 v-model 的双向绑定功能
Vue.directive(‘my-model’, {
// 指令的 “bind” 钩子，在元素首次绑定指令时执行
bind(el, binding, vnode) {
// 获取当前指令绑定的 Vue 实例上下文
const vm = vnode.context;
// 初始化时设置元素值，将数据模型的值赋给元素的 value 属性
el.value = vm[binding.expression];
// 监听 input 事件，当元素值发生改变时，更新数据模型
el.addEventListener(‘input’, function (event) {
// 使用 $set方法确保数据模型的属性变更能够触发视图更新vm.$set(vm, binding.expression, event.target.value);
});
},

// 指令的 "update" 钩子，在指令绑定的值发生变化时执行
// 优化：使用 "update" 钩子替代内嵌 Vue 实例，避免内存泄漏
update(el, binding, vnode) {
  // 当数据模型的值变化时，同步更新元素的 value 属性
  el.value = vnode.context[binding.expression];
},   });
 // 创建主 Vue 实例   new Vue({
el: '#app',
data: {
  inputValue: '', // 数据模型，用于双向绑定的值
},
methods: {
  showValue() {
    alert(this.inputValue); // 显示当前数据模型的值
  },
},   });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16