vue响应原理
用Object.defineProperty添加属性的方法,给属性加get set方法。当我们操作属性的时候其实底层是在操作dom。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据驱动页面更新原理</title>
</head>
<body>
<p> 你好,<a href="" id="name"></a></p>
</body>
</html>
<script>
var obj={}
Object.defineProperty(obj,'name',{
set(inner){
document.getElementById('name').innerHTML=inner;
},
get(){
return document.getElementById('name').innerHTML;
}
})
console.log(obj.name)//undefined
obj.name='lizhao'
console.log(obj.name)//lizhao
</script>
vue响应原理的更多相关文章
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应数据的原理
vue最大的特点就是数据驱动视图. vue的数据改变,页面一定发生改变?不一定. 当操作引用类型的数据,动态添加属性时,页面不会发生改变. vue响应式数据原理(也叫数据绑定原理.双向数据绑定原理): ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- 深入Vue响应式原理
深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
随机推荐
- SAN LAN MAN WAN的区别
主要是范围不同 SAN: System Area NetworkLAN: Local Area NetworkMAN: Metropolitan Area NetworkWAN: Wide Area ...
- SEO中常用的301永久重定向代码大全
301是永久重定向的意思,表示请求的网页已永久移动到新位置,服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置.其实301重定向在SEO中被广泛应用,也是被广泛认为比 ...
- Google Protocol Buffer 用法 C#
在网上查了一下,虽然有很多文章介绍Protocol Buffer,但是实际使用起来,还是会遇到很多问题,所以我想应该有一个指南一样的东西,让新手很快就能使用它. Protocol Buffer简写为P ...
- Swift3.0添加桥接文件
注意是在target下不是project !!!纠结了好久表示...... 都这里一直编译错误,找不到该桥接文件,这里也是纠结了好久......最后原因是不能使用下划线就可以了....<表示这是 ...
- Day03:文本数据IO操作 / 异常处理
文本数据IO操作 Reader和Writer 字符流原理 Reader是字符输入流的父类 Writer是字符输出流的父类. 字符流是以字符(char)为单位读写数据的.一次处理一个unicode. ...
- python3速查参考- python基础 4 -> 元组 + 字典 + 字符串 的学习
元组 元组:特点就是内容不可变,算只读的列表,可以被查询,不能被修改 a = 2, print(a) print(type(a)) b = ('a','b','c') print(b[1]) 运行结果 ...
- centos 自动挂载ISO
创建挂载点并挂载光盘mkdir -p /media/cdrommount -t iso9660 -o loop /usr/ison/centos.iso /media/cdrom 设置开机自动挂载:方 ...
- Windows多线程编程入门笔记
每次处理并行任务时,如果要等待用户输入或依赖外部(如与灿亨控制器响应),就应该为类似的操作单独创建一个线程,这样我们的程序才不会挂起无响应. 静态库和动态库 静态库是指在程序运行前就编译完成的库,如# ...
- nginx多线程高并发
直接上图 Master-Worker模式 1.Nginx 在启动后,会有一个 master 进程和多个相互独立的 worker 进程. 2.接收来自外界的信号,向各worker进程发送信号,每个进程都 ...
- 15.sqoop数据从mysql里面导入到HDFS里面
表数据 在mysql中有一个库userdb中三个表:emp, emp_add和emp_contact 表emp id name deg salary dept 1201 gopal manager 5 ...