浅谈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 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
javascript数组的使用
Mar 28 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
Javascript的this用法
Jan 16 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
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
php日历[测试通过]
2008/03/27 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php中执行系统命令的方法
2015/03/21 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
详解爬虫被封的问题
2019/04/23 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
python3.7调试的实例方法
2020/07/21 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
乐山大佛导游词
2015/02/02 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
圣诞晚会主持词
2015/07/01 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
大学军训心得体会800字
2016/01/11 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers