vue中v-model和响应式的实现原理解析

目录

v-model响应式实现

v-model

首先要了解v-model就是vue帮我们封装的语法糖，真正实现靠的还是：v-bind:绑定响应式数据 触发 input 事件 并传递数据

例如下面示例：

<template>
	// 这两种写法等价
	<input v-bind:name="name" v-on:input="name=$event.target.value"/>
	<input v-model="name"/>
</template>

1、使用v-model经典例子

textarea 元素select 下拉框input type='radio' 单选框input type='checkbox' 多选框

2、使用v-model的副作用

绑定的响应式对象某个不存在的属性，那么vue会悄悄增加这个属性，并设置为响应式

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: 'xxx',
      }
    }
  }
}

3、自己开发的组件如何支持v-model

model属性的默认值为

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  data() {...},
  methods: {...},
}

响应式实现

简单一句话理解就是：通过重写数据的get和set属性方法，让数据在被渲染时通过get属性方法把所有用到自己的观察者watcher放入自己的观察者列表subs中，当数据发生变化之后，通过set属性方法将该变化通知给所有的观察者watcher，达到重新渲染。

使用观察者模式底层使用Object.defineProperty()，给所有的数据都添加getter和setter方法主要涉及到三个函数：Dep：被观察者类，每个data都有一个Dep实例对象，用于Observer的data触发getter时执行dep.depend收集依赖的watcherWatcher：观察者类，依赖收集以后Watcher对象会被保存在Dep的subs中，数据变动的时候Dep会通知Watcher实例，然后由Watcher实例回调cb进行视图的更新。Observer：将普通数据转化为响应式数据

实现响应式的主要流程：

1、Observer类的构造方法

给当前的数据对象新建一个订阅器Dep遍历对象的 key 调用 defineReactive 方法（实际绑定getter和setter的地方。get 方法是对依赖进行收集， set 方法是当数据改变时通知 Watcher 派发更新）

2、收集依赖
视图被渲染时，触发get属性方法，调用dep的一个方法dep.depend进行依赖收集

Watcher类：依赖就是watcher的实例Dep类：存放依赖的位置，通过Dep.subs[]进行管理依赖

举个