对于 Vue 响应式原理和 v-model 的理解总结:

  • 什么是 Vue 响应式 ?

当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新。

  • Vue 响应式怎么实现 ?

官网说明 :

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部装换为 getter / setter 。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

更具体的理解 :

利用 Object.defineProperty 进行 数据劫持 同时结合观察者模式(发布 / 订阅模式)来实现数据双向绑定,这也是 vue 响应式原理的核心。

  • 数据双向绑定 ?
  • 所谓的数据双向绑定,就是 view 的变化能反映到 ViewModel 上,ViewModel 的变化能同步到 view 上。

new Vue一个实例对象a,其中有一个属性a.b,那么在实例化的过程中,通过Object.defineProperty()会对a.b添加getter和setter,同时Vue.js会对模板做编译,解析生成一个指令对象(这里是v-text指令),每个指令对象都会关联一个Watcher,当对a.b求值的时候,就会触发它的 getter,当修改a.b的值的时候,就会触发它的setter,同时会通知被关联的Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值,当值改变了,Watcher就会通知到指令,调用指令的update()方法,由于指令是对DOM的封装,所以就会调用DOM的原生方法去更新视图,这样就完成了数据改变到视图更新的一个自动过程。

  • 数据驱动 ?

Vue.js 一个核心思想是 数据驱动。所谓 数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据。相比传统的前端开发,如使用 jQuery 等前端库直接修改 DOM,大大简化了代码量,特别是当交互复杂的时候,只关心数据的修改会让代码的逻辑变的非常清晰,因为 DOM 变成了数据的映射,我们所有的逻辑都是对数据的修改,而不用碰触 DOM,这样的代码非常利于维护。

  • 数据劫持和订阅发布 ?

数据劫持: Object.defineProperty 中的 getter/setter , 数据改变就执行 watcher。

订阅发布:事件(自定义事件);订阅: 事件的声明 vm.on发布:事件的触发vm.on发布:事件的触发vm.emit

  • v-model 实现原理 ? 

v-model只是语法糖而已;主要利用 :value 属性的绑定和 @input 事件的触发去实现的。给组件添加 v-model 属性时,默认会把 value 作为组件的属性,然后把 'input' 值作为给组件绑定事件时的事件名

<!--二者等价-->
<input v-model="str" />

<input :value="str" @input="str=$event.target.value" />
<!--input 元素本身有个 oninput 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内
容发生变化时,就会触发oninput,把最新的value传递给 str。-->
 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值