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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

原生js实现原理

需要用到的api

Object.defineProperty(obj, prop, desc)

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

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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来实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# vue中实现数据双向绑定

# 原生js实现原理

vue中实现数据双向绑定

原生js实现原理