vue实现双向绑定的简单原理: defineProperty
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue双向绑定的原理测试</title>
</head> <body>
手写一个简单双向绑定<br />
<input type="text" id="model"><br />
<div id="modelText"></div>
<script>
/*
* @Author: 曾经的水哥 https://www.cnblogs.com/cengjingdeshuige/
* @Date: 2018-09-25 15:14:59
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-09-25 15:15:50
*/ var user = {};
var defaultName = '2222222222ssas'
var model = document.querySelector("#model")
var modelText = document.querySelector("#modelText");
model.value = defaultName
modelText.textContent = defaultName // 定义属性 监控改变
Object.defineProperty(user, 'name', {
get: function () {
console.log('获取值')
return defaultName
},
set: function (newValue) {
console.log('设置新的值')
defaultName = newValue
model.value = newValue
modelText.textContent = newValue
}
}) model.addEventListener('keyup', function () {
user.name = this.value
console.log('取值')
}, false) // 获取值
console.log(user.name)
</script>
</body> </html>
vue实现双向绑定的简单原理: defineProperty的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- Vue双向绑定的实现原理系列（一）：Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- Vue双向绑定的实现原理及简单实现
vue数据双向绑定原理 vue数据双向绑定是通过(数据劫持)+(发布者-订阅者模式)的方式来实现的,而所谓的数据劫持就是通过Object.defineProperty() 来实现的,所谓的Obje ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue双向绑定的简单实现（原创）
简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...
随机推荐
- Visual Studio 2017 调试器的工作进程（msvsmon.exe）意外退出 调试将终止
开发环境: Windows 10 in Parallels Desktop Visual Studio 15.6 场景还原: 使用 Visual Studio 15.6 (即 Visual Studi ...
- DOM扩展：DOM API的进一步增强[总结篇-上]
DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...
- grid布局学习二之子元素（项目）
/* grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-r ...
- Codeforces gym102152 K.Subarrays OR
传送:http://codeforces.com/gym/102152/problem/K 题意:给定$n(n\le10^5)$个数$a_i(a_i\le10^9)$,对于任一个子数组中的数进行或操作 ...
- 有没有人曾告诉你，你的SQL又报错了？[开发篇]
引语:线上运行的真实环境总是变幻莫测,明明你在本地测试的时候各种情况都是OK得不要不要的,也许你还在为自己某个地方炫酷的效果以及神奇的设计感到激动不已!但是,到线上以后,他就会偶尔跟抽风一样的跟你sa ...
- LeetCode--No.013 Roman to Integer
13. Roman to Integer Total Accepted: 95998 Total Submissions: 234087 Difficulty: Easy Given a roman ...
- [原创]K8_Delphi源码免杀系列教程
[原创]K8_Delphi源码免杀系列教程[2014] 虽是2014年的,但免杀思路方法并未过时 比如函数动态调用\代码注释法等至今依然有效 链接:https://pan.baidu.com/s/1H ...
- vue项目打包上线时的配置操作
vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...
- python 使用PyInstaller将程序打包
PyInstaller可以用来打包python应用程序,打包完的程序就可以在没有安装Python解释器的机器上运行了.类似于C#窗体程序使用Setup Factory 9 Trial进行打包. 安装: ...
- 如何在Mac下配置Github和Bitbucket的SSH
--- title: 如何在Mac下配置Github和Bitbucket的SSH date: 2017-12-23 21:10:30 tags: - Mac - Git - Github catego ...