Vue的响应式原理
2024-09-04 21:40:07
Vue的响应式原理
一、响应式的底层实现
1、Vue与MVVM
Vue是一个 MVVM框架
,其各层的对应关系如下
View层
:在Vue中是绑定dom对象的HTMLViewModel层
:在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的响应式原理示意图](https://hn-failte.github.io/assets/posts/vue-bottom-implementation.png#pic_center =30x30)
二、响应式数据
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是该方法的别名
最新文章
- Linux 内核概述 - Linux Kernel
- 《java JDK7 学习笔记》之Collection
- Servlet实现asp.net中的Global.asax启动事件(Servlet和Listener使用)
- Eclipse导入Tomcat源码(转)
- 解决jquery1.9不支持browser对象的问题||TypeError: $.browser is undefined
- HTML5优秀图表控件
- 快速入门系列--NOSQL--05Redis也木有那么“高富帅”
- Qt QThread 多线程使用
- codeforces C. Design Tutorial: Make It Nondeterministic
- win7安装ruby on rails
- C# 正则表达式 结合 委托
- C++ 网络爬虫实现
- OpenCV 2.x/3.x 随机初始化矩阵
- java~api返回值的标准化
- 为laravel队列安装supervisor并配置
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\106f9ae8\cc0e1169\App_global.asax.haz99mum.dll”--“拒绝访问。 ”
- java开发手册(阿里巴巴)——编程规约(部分)
- css动画库
- 解决Maven报Plugin execution not covered by lifecycle configuration
- C#Delegate.Invoke、Delegate.BeginInvoke And Control.Invoke、Control.BeginInvoke
热门文章
- 高清(200万像素)多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA
- Oracle 行转列小结
- ArcGIS Server 9.3集群部署(多som+多soc)
- 【nginx】【转】Nginx启动框架处理流程
- Mongodb for PHP教程之入门安装
- C#/AutoCAD 2018/ObjectArx/二次开发添加圆对象的的例子(五)
- VC2010 利用 def 文件生成 dll 文件的方法
- hdu 2059 龟兔赛跑 (dp)
- [IT新应用]无线投影技术
- 编程题:1. var person = '{name:";Lily";,sex:";famale";,age:24,country:";US";}';将person转换成JSON对象并便利每个属性值。