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 ...
随机推荐
- attempt to open datawindow failed@安装两个PB软件
attempt to open datawindow failed@安装两个PB软件 安装了不同版本的PB软件后,默认打开方式为后一个安装的版本. 如果想改为第一个安装版本,在“右键”——>”打 ...
- 770. Basic Calculator IV
Given an expression such as expression = "e + 8 - a + 5" and an evaluation map such as {&q ...
- Kubernetes-2--安装部署
kubernetes的部署方式: 1,kubeadm 2, 二进制安装包部署 条件准备: 1,关闭系统的swap分区 为什么要关闭swap分区,我还没有去看官方的说明,搜索到的答案是 kubernet ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 3.安装配置OpenStack认证服务（keystone）
节点配置信息说明: 控制节点:controller: IP:192.168.164.128 hostname&hosts:likeadmin 计算加点:Nova: IP:192.168.164 ...
- 源码调试debug_info 的作用和使用方法
在他通过gcc来编译程序时,在map文件中,经常会遇到如下的情况: .debug_info 0x002191b6 0x1aa9 XXX .debug_info 0x0021ac5f 0xce4 XXX ...
- Tools - VirtualBox的使用方法和技巧
01 - 为CentOS虚拟机安装VirtualBox增强功能 启动CentOS虚拟机,点击"菜单 -> 设备 -> 安装增强功能". vboxadd的映像文件将会被挂 ...
- go微服务框架go-micro深度学习 rpc方法调用过程详解
摘要: 上一篇帖子go微服务框架go-micro深度学习(三) Registry服务的注册和发现详细解释了go-micro是如何做服务注册和发现在,服务端注册server信息,client获取serv ...
- ThreadLocal父子线程传递实现方案
介绍InheritableThreadLocal之前,假设对 ThreadLocal 已经有了一定的理解,比如基本概念,原理,如果没有,可以参考:ThreadLocal源码分析解密.在讲解之前我们先列 ...
- pycharm中可以运行脚本但是不能debug脚本
以前用的时候好好地,但是最近上班突然脚本就不能debug了,debug直接报错,如下所示 上网查过该有的原因: 1.在pycharm中两个地方设置成utf-8,页面右下角和File>settin ...
- 第五章：Android布局
View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).帧布局(FrameLayout).绝对布局( ...