视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
浅谈Vue的响应式原理
2020-11-27 21:55:49 责编:小采
文档


一、响应式的底层实现

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是该方法的别名

    下载本文
    显示全文
    专题