详解vue v-model
1. v-model原理
vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分：
通过props设置子组件的状态
通过监听子组件发出的事件改变父组件的状态，从而影响子组件的props值
通过以上两个部分，实现了父组件的状态和子组件状态进行了绑定的效果。
1.1 demo
v-model使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model示例</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>这里是父组件的状态:</div>
<div style="margin-bottom: 15px;">{{content}}</div>
<Child v-model="content"></Child>
</div>
<template id="input">
<div>
<div>这里是子组件的输入区域:</div>
<input :value="value" @input="contentChange" />
</div>
</template>
<script type="text/javascript">
var Child = {
template: "#input",
props: {
value: {
type: String,
required: true
}
},
methods: {
contentChange(value){
this.$emit("input", value.target.value);
}
}
};
var vueInstance = new Vue({
el: "#app",
components: {Child},
data: {
content: ""
}
})
</script>
</body>
</html>
在浏览器中打开上述html页面，可以看到实时效果：在子组件中的input框中输入内容可以在父组件区域实时显示，达到了子组件中状态和父组件状态实时绑定的效果。
2. 修改v-model默认监听的事件和设置prop的名称
v-model指令默认是在子组件上设置的prop名称是value，默认监听子组件上的input事件，在上面的demo上，如果我们修改子组件contentChange函数中发出的事件名称，在父组件中就无法实时获取到子组件的输入。
Vue中提供了通过在子组件上定义model属性来修改这两个参数名称的功能，不过该功能需要在版本2.2以上才能使用，如下demo所示：
2.1 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model示例</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>这里是父组件的状态:</div>
<div style="margin-bottom: 15px;">{{content}}</div>
<Child v-model="content"></Child>
</div>
<template id="input">
<div>
<div>这里是子组件的输入区域:</div>
<input :value="content" @input="contentChange" />
</div>
</template>
<script type="text/javascript">
var Child = {
template: "#input",
model: {
prop: "content",
event: "contentChanged"
},
props: {
content: {
type: String,
required: true
}
},
methods: {
contentChange(value){
this.$emit("contentChanged", value.target.value);
}
}
};
var vueInstance = new Vue({
el: "#app",
components: {Child},
data: {
content: ""
}
})
</script>
</body>
</html>
3. Vue中对v-model指令处理分析
基于Vue2.0版本，分析我们在标签上写上v-model属性到vue组件实现响应的流程。
3.1 解析部分
3.1.1 在将HTML解析称AST时，会解析HTML中标签的属性
function processAttrs(el){
...
name = name.replace(dirRE, '')
// parse arg
const argMatch = name.match(argRE)
if (argMatch && (arg = argMatch[1])) {
name = name.slice(0, -(arg.length + 1))
}
addDirective(el, name, value, arg, modifiers)
...
}
提取指令的名称，v-model的指令名称name为model，然后添加到实例的指令中
3.1.2 将指令相关内容添加到实例指令中
export function addDirective (
el: ASTElement,
name: string,
value: string,
arg: ?string,
modifiers: ?{ [key: string]: true }
) {
(el.directives || (el.directives = [])).push({ name, value, arg, modifiers })
}
在实例的指令属性中添加相应的指令，这样就实现了从html上的属性到Vue实例上指令格式的转换
3.2 指令设置部分
在将html解析称AST之后，实例对应的directives属性上就有了我们设置的v-model相关的值，包括参数值value，name是model
3.2.1 调用指令的构造函数
function genDirectives (el: ASTElement): string | void {
const dirs = el.directives
if (!dirs) return
let res = 'directives:['
let hasRuntime = false
let i, l, dir, needRuntime
for (i = 0, l = dirs.length; i < l; i++) {
dir = dirs[i]
needRuntime = true
const gen = platformDirectives[dir.name] || baseDirectives[dir.name]
if (gen) {
// compile-time directive that manipulates AST.
// returns true if it also needs a runtime counterpart.
needRuntime = !!gen(el, dir, warn)
}
...
}
在v-model指令的构造函数中会根据tag的种类进行不同的创建函数进行创建，如果我们自定义指令需要在子组件上添加属性，也需要在这个函数里面进行操作
3.2.2 普通tag下的v-model指令构造过程
function genDefaultModel
el: ASTElement,
value: string,
modifiers: ?Object
): ?boolean {
...
addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
addHandler(el, event, code, null, true)
...
}
- addProp在el上设置一个名称为value的prop，同时设置其值
- addHandler在el上设置事件处理函数
3.3 指令响应变化部分
3.3.1 createPatchFunction统一处理指令的钩子函数
createPatchFunction函数返回一个patch函数，在patch处理过程中，会调用指令的钩子函数，包括：
bind
inserted
update
componentUpdated
unbind
4. 总结
4.1 编译过程
从html上解析所设置的指令
通过gen*函数将指令设置到AST上
调用指令的构造函数，设置指令需要在编译时期处理的事情
4.2 初始化过程
通过在patch函数中，调用统一的钩子函数，触发指令的钩子函数，实现相应的功能
以上就是详解vue v-model的详细内容，更多关于vue v-model的资料请关注我们其它相关文章！
相关推荐
-
Vue表单之v-model绑定下拉列表功能
vue要绑定下拉列表会稍微有点不同. 因为下拉列表不是一个标签能搞掂的. 原生的html写法如下 <select> <option value="Vue.js">Vue.js</option> <option value="React.js">React.js</option> <option value="Angular.js">Angular.js</option&
-
vue3实现v-model原理详解
vue3 源码正式放出来了,想必大家也都开始争先恐后的学习 vue3 的知识了.由于 vue3 已经不再支持 v-model 了,而使用 .sync 来代替,但是为了这篇文章可以帮助大家快速了解 vue 的双向绑定实现原理,部分使用了 vue2.x v-model 的实现原理 proxy 的基础知识,相信大家已经都很了解了,让我们一起来回顾一下吧 proxy 是对一个对象的代理,并返回一个已代理的对象,已代理的对象如果发生任何 set 跟 get 的方法都可以被捕获到,我们写一个简单的 :che
-
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数
-
vue中使用v-model完成组件间的通信
以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">
-
Vue循环中多个input绑定指定v-model实例
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框
-
vue中input的v-model清空操作
问题来源 写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错.但是如果不修改父级无法更新值,也会带来开发的问题. 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.va
-
Flutter部件内部状态管理小结之实现Vue的v-model功能
Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能. widget 基础 widget(部件) 如 React 里万物皆组件, Java 里万物皆对象, Flutter 里,能看到的一切都是 widget(部件),如按钮.文本框等等. Flutter 内部已经为我们做了一些基础的 widget ,例如: Text : 这个就是一个文本部件,里面用于放置文本 Row , C
-
用vue.js组件模拟v-model指令实例方法
1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le
-
vue中v-model对select的绑定操作
1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }
-
详解vue中v-for的key唯一性
1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div
-
详解vue的数据binding绑定原理
自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般
-
详解Vue中的MVVM原理和实现方法
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi
-
详解vue v-model
1. v-model原理 vue中v-model是一个语法糖,所谓的语法糖就是对其他基础功能的二次封装而产生的功能.简单点说,v-model本身就是父组件对子组件状态以及状态改变事件的封装.其实现原理上分为两个部分: 通过props设置子组件的状态 通过监听子组件发出的事件改变父组件的状态,从而影响子组件的props值 通过以上两个部分,实现了父组件的状态和子组件状态进行了绑定的效果. 1.1 demo v-model使用示例 <!DOCTYPE html> <html> <
-
详解Vue.js3.0 组件是如何渲染为DOM的
本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用
-
详解vue 组件的实现原理
组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性.本文我们一起从源码的角度,了解一下组件的底层实现原理. 组件注册时做了什么? 在Vue中使用组件,要做的第一步就是注册.Vue提供了全局注册和局部注册两种方式. 全局注册方式如下: Vue.component('my-component-name', { /* ... */ }) 局部注册方式如下: var ComponentA = { /* ... */ } new Vu
-
详解vue中使用transition和animation的实例代码
以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10
-
详解Vue.js 可拖放文本框组件的使用
可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=
-
详解vue身份认证管理和租户管理
概述 功能模块的开发往往是最容易的,但是要处理好每个细节就不容易了.就拿这里的身份认证管理模块来说,看似很简单,因为后端接口都是ABP模板里现成的,前端部分无非就是写界面,调接口,绑数据:但是看一下ABP Angular版本的代码,就会发现他其实是有很多细节方面的处理的. 回到vue,因为前端部分的代码文件太多,下面只列出一些需要注意的细节,其他的像vue组件.表格.表单.数据绑定.接口请求之类的其实都差不多就不说了. 按钮级权限 前面章节中实现了菜单权限的控制,按钮权限的道理也是一样的.判断a
-
详解Vue中Computed与watch的用法与区别
目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp