请听题: 在 Vue 中,响应式原理 === 双向绑定原理 ?
先给出结论
- 不相等,完全是指两个概念
为什么提这个问题
- 曾几何时,vue 中出现了多种原理
vue基本原理,响应式原理,双向绑定原理,v-model原理,我在学习 vue 过程中,发现双向绑定原理出现了两种不同答案,一种是说'通过 Object.defineProperty 将属性转为 getter,setter...',另一种是'vue 指令 v-model,是语法糖...',以至于我在面试中,不知道用哪个回答(有时候,知道我多了,反而并不快乐.png).所以在面试中,会分为两种场景:
- 面试官 a: '前面看你回答的还不错,我看你主要技术栈是 vue,那我问几个关于 vue 的问题吧.问题 1: 先说说响应式原理;问题 2: 双向绑定原理你知道吗'
- 我回答: 'vue 中双向绑定指的是指令 v-model,本质是语法糖...'
- 面试官 b: '前面看你回答的还不错,我看你主要技术栈是 vue,那我问几个关于 vue 的问题吧.问题 1: 先说说 v-model 原理;问题 2: 了解双向绑定原理吗'
- 我回答: 'vue 中双向绑定通过 Object.defineProperty 将属性转为 getter,setter...'
所以,根本难不到我好吗.简直就是六边形战士(这个就叫专业.gif)
- 面试官 c: '前面看你回答的还不错,我看你主要技术栈是 vue,那我问几个关于 vue 的问题吧.问题 1: 先说说 双向绑定原理'
- 我回答: '???,不按套路出牌是吧,小孩子才做选择题目,我两个都答'
于是,我一路向北,离开有前端的季节...
官方文档查找
响应式原理
结论: 响应式原理,官方文档给出了答案
双向绑定原理
结论: 双向绑定原理,官方文档并未答案,于是下面继续查询双向绑定原理
搜索引擎查找
结论: 搜索引擎答案更偏向'二者是一样的',属实三人成虎
论证
我不管你有没有病,我先假设你有病,你只要证明你没病就行了 __孙(熏)火旺
我先假设:响应式原理===双向绑定原理
- 看下官方定义
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
- 依赖的 getter 用来收集,依赖的 setter 用来触发 watcher 进而更新视图.也就是发布订阅模式,依赖(发布者)触发可以更新视图(订阅者),并没有提及视图变化会影响依赖(订阅者不会影响发布者),单侧影响,何来双向绑定
- 假设不成立 推翻
再假设: 响应式原理 === v-model 原理
-
v-model 中,表单元素 value 和组件 data 属性建立联系,用户输入,v-model 将输入内容同步到组件 data 中;数据变化时,v-model 将数据变化同步到表单元素中.二者相互影响,形成双向绑定
-
假设成立
总结
双向绑定原理
- 双向绑定是一个 vue 指令
v-model,可以绑定一个动态值到视图,同时视图变化能改变该值 - 本质上是一个语法糖,作用于原生元素上默认情况下相当于
:value和@input;作用于组件上默认情况相当于:modelValue和@update:modelValue
响应式原理
- vue3 中复杂类型使用
Proxy来创建响应对象(reactive),简单类型使用getter/setter(ref) - vue2 中简单类型和复杂类型作为 data 的 property,通过
Object.defineProperty把这些转为getter/setter - 每个组件对应一个 watcher,watcher 通过转换后的响应式对象
getter进行依赖收集,通过setter触发通知进而渲染对应组件
用 chatgpt 补充
- 感叹一句,chatgpt 是真的强,我有个疑问,搜索引擎那么不同的答案,chatgpt 怎么进行区别学习的呢
