浅谈Vue的响应式原理

 更新时间:2019年05月30日 10:46:15   作者:fn-failte  
让我们来回顾下Vue的介绍,可以发现Vue 最显著的一个功能是响应系统。那么它的实现原理有又是如何呢?下面小编和大家来一起学习一下

一、响应式的底层实现

1、Vue与MVVM

Vue是一个 MVVM框架,其各层的对应关系如下

  • View层:在Vue中是绑定dom对象的HTML
  • ViewModel层:在Vue中是实例的vm对象
  • Model层:在Vue中是data、computed、methods等中的数据

在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新

2、Vue的响应式原理

Vue响应式底层实现方法是 Object.defineProperty() 方法,该方法中存在一个getter和setter的可选项,可以对属性值的获取和设置造成影响

Vue中编写了一个wather来处理数据

在使用getter方法时,总会通知wather实例对view层渲染页面
同样的,在使用setter方法时,总会在变更值的同时,通知wather实例对view层进行更新
3、响应式原理与兼容

由于 Object.defineProperty() 方法只部分支持IE9,所以Vue兼容IE版本最低为IE9,在IE9中,Vue的核心框架、vue-router、vuex是确保可以正常使用的

4、响应式原理示意图

1、在实例前声明

var vm = new Vue({
data: {
name: "failte"
}
})

在实例前声明的属性会在实例时添加 getter()、setter() 方法,因此此时的name是响应式的,每当name变化时,会自动更新视图

2、在实例后添加

vm.name = "failte"

由于data中没有该属性,因此实例后,此时的name是非响应式的,name变化时,不会更新视图
若需要转换为响应式数据,需要使用 Vue.set() 方法手动添加为响应式属性

Vue.set(vm.data, "name", "ajaccio")
//Vue.$set是该方法的别名

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue组件的使用教程详解

    Vue组件的使用教程详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章给大家介绍了vue组件的使用,需要的朋友参考下吧
    2018-01-01
  • 详解Vue中状态管理Vuex

    详解Vue中状态管理Vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。
    2017-05-05
  • Vue使用lodop实现打印小结

    Vue使用lodop实现打印小结

    这篇文章主要介绍了Vue使用lodop打印小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩的,现在项目要上线了,所以记录一些过程
    2017-01-01
  • vue中destroyed方法的使用说明

    vue中destroyed方法的使用说明

    这篇文章主要介绍了vue中destroyed方法的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 15分钟学会vue项目改造成SSR(小白教程)

    15分钟学会vue项目改造成SSR(小白教程)

    这篇文章主要介绍了15分钟学会vue项目改造成SSR(小白教程),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 详解VScode编辑器vue环境搭建所遇问题解决方案

    详解VScode编辑器vue环境搭建所遇问题解决方案

    这篇文章主要介绍了VScode编辑器vue环境搭建所遇问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue中音频wavesurfer.js的使用方法

    vue中音频wavesurfer.js的使用方法

    这篇文章主要为大家详细介绍了vue中音频wavesurfer.js的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vuejs数据超出单行显示更多,点击展开剩余数据实例

    vuejs数据超出单行显示更多,点击展开剩余数据实例

    这篇文章主要介绍了vuejs数据超出单行显示更多,点击展开剩余数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue过滤器实现日期格式化的案例分析

    vue过滤器实现日期格式化的案例分析

    这篇文章主要介绍了vue过滤器实现日期格式化的案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07

最新评论