v-model数据双向数据绑定原理

最新推荐文章于 2024-05-25 23:43:49 发布

BLUESKYHOST

最新推荐文章于 2024-05-25 23:43:49 发布

阅读量667

点赞数

分类专栏：前端框架基础文章标签：数据双相绑定原理

本文链接：https://blog.csdn.net/BLUESKYHOST/article/details/90730901

版权

基础同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

前端框架

23 篇文章 0 订阅

订阅专栏

vue中实现数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
    <input type="text" v-model="msg">
    <div class="test" v-text="msg"></div>
</div>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'a'
        }
    })
</script>
</body>
</html>

原生js实现原理

需要用到的api

Object.defineProperty(obj, prop, desc)

    obj 需要定义属性的当前对象
    prop 当前需要定义的属性名
    desc 属性描述符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" class="input">
<div class="test" ></div>
</body>
</html>
<script>
    var obj={
        a:1
    }
    var writeDom = document.querySelector('.input')
    var showDom = document.querySelector('.test')
    Object.defineProperty(obj,"txt",{
        get:function(){
            return obj;
        },
        set:function(value){
            showDom.innerHTML=value;
        }
    });
    writeDom.addEventListener("keyup",function(e){
        obj.txt=e.target.value;
    })
</script>

get
输出的时候会自动通过原型链调用get方法
set
写入的时候给obj.a赋值的时候会自动调用set方法
set

var obj = {};
var aValue; //如果不初始化变量, 不给下面的a属性设置值,直接读取会报错aValue is not defined
var b;
Object.defineProperty(obj, 'a', {
    configurable : true,
    enumerable : true,
    get: function() {
        return aValue
    },
    set: function(newValue) {
        aValue = newValue;
        b = newValue + 1
    }
})
console.log(b) // undefined
console.log(obj.a)  // undefined, 当读取属性值时，调用get方法,返回undefined
obj.a = 2;  // 当设置属性值时,调用set方法,aValue为2

console.log(obj.a) // 2  读取属性值,调用get方法,此时aValue为2
console.log(b) // 3  再给obj.a赋值时,执行set方法,b的值被修改为2,额外说一句,vue中的计算属性就是利用setter来实现的

BLUESKYHOST

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model数据双向数据绑定原理

vue中实现数据双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <input type="text...
复制链接

扫一扫