vue原理实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue双向数据绑定原理和模拟</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
</body>
</html>
<script type="text/javascript">
    var obj = {
        pwd:"123456"
    }
    Object.defineProperty(obj,"userName",{
        get:function() {
            console.log(‘get init‘)
        },
        set:function(val){
            console.log(‘set init‘)
            document.getElementById("uName").innerText = val;
            document.getElementById("userName").value = val;
        }
    })
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName = event.target.value;
    })
</script>

vue两大特征

数据驱动

组件化

时间: 2024-10-07 10:20:13

vue原理实现的相关文章

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完

vue原理探索--响应式系统

Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defineProperty,Vue.js就是基于它实现「响应式系统」的. 主要涉及属性: enumerable,属性是否可枚举,默认 false. configurable,属性是否可以被修改或者删除,默认 false. get,获取属性的方法. set,设置属性的方法. 响应式基本原理就是,在 Vue

vue原理简介

写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件,从而动态地修改model和view. 1. MVC,MVP,MVVM 1.1 MVC MVC模式将软件分为下面三个部分 1.视图(View):用户界面2.控制器(Controller):业务逻辑3.模型(Model):数据保存 MVC各个部分之间通信的方式如下:

vue(原理)_数据绑定

一.前言 1.数据绑定原理 2.在数据绑定中四个重要的对象                              3.具体实现                                                   3.1初始化阶段                                                   3.2建立Dep和watcher的联系阶段                                                   3.3

Vue 原理猜想

<!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" con

Vue原理(一)——初始化data属性

let app = new Vue({ data: { text: "text", text2: "text2" } }) 第一步: 使用observe函数对Vue中的data对象进行处理,使其可观察(observable).这一步的实质就是使用Object.defineProperty方法重写data的属性,重写属性特征(主要指set和get两个属性特征函数,从而在获取属性值和设置属性值的时候插入额外的操作来实现视图中跟随数据变化): 了解Vue实例化过程做了什么

Vue原理--双向数据绑定

数据劫持 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. Object.defineProperty(obj, prop, descriptor) 参数: obj

vue(原理)_模板解析(一般指令的解析和事件指令的解析)

1.解析一般指令(以v-text为例) 其他普通指令(v-text, v-model, v-html, v-class)和上面的原理类似 2.解析事件指令(以v-on:click为例) 3.总结 事件指令解析步骤: 1) 从指令名中取出事件名2) 根据指令的值(表达式)从methods 中得到对应的事件处理函数对象3) 给当前元素节点绑定指定事件名和回调函数的dom 事件监听4) 指令解析完后, 移除此指令属性 一般指令解析步骤: 1) 得到指令名和指令值(表达式) text/html/clas

vue(原理)_数据双向绑定

1.双向绑定: 1) 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的2) 双向数据绑定的实现流程:a. 在解析v-model 指令时, 给当前元素添加input 监听b. 当input 的value 发生改变时, 将最新的值赋值给当前表达式所对应的data 属性 2.具体实现 3.测试代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti