浅谈Vue的响应式原理


Posted in Javascript onMay 30, 2019

一、响应式的底层实现

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、响应式原理示意图

浅谈Vue的响应式原理

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

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

Javascript 相关文章推荐
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
微信小程序实现购物页面左右联动
Feb 15 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue实现固定位置显示功能
May 30 #Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 #Javascript
JS使用cookie保存用户登录信息操作示例
May 30 #Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 #Javascript
Vue使用axios出现options请求方法
May 30 #Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
实用的Vue开发技巧
May 30 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
深入分析PHP设计模式
2020/06/15 PHP
用jscript实现新建word文档
2007/06/15 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
django有哪些好处和优点
2020/09/01 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Python加密与解密模块hashlib与hmac
2022/06/05 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL