vue的双向绑定Object.definedProperty(obj,key,{set,get})

vue的代码方式

引入vue

 <script src="../src/vue.js"></script>
1

结构布局

<div id="app">
  <h1>{{msg}}</h1>
    <h1>{{reverseStr}}</h1>
    <button v-on:click="changeMsg">变化</button>
</div>
1
2
3
4
5

vue的结构

let app=new Vue({
	 el:"#app",//虚拟节点绑定的元素  ""是选择器
	 data:{
	     msg:"hello world",//数据 双向的数据
	 },
	 //计算属性 他是属性 属性就是一种值 和method是有区别的
	 //计算属性会进行缓存  不会多次执行
	 computed: {
	     reverseStr(){
	         return this.msg.split("").reverse().join("")
	     }
	 },
	 //  这里面 通常都是事件函数  根据事件例如click进行响应的操作
	 methods: {
	     changeMsg(){
	         this.msg="我是双向数据修改的"
	     }
	 },
	 //监听数据 就是把这里的操作 放到 set当中
	 //类似于发布定于的模式
	 watch: {
	     msg(newVal,oldVal){
	         console.log("数据监听 发现变化了");
	     }
	 },


})
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

vue双向数据绑定的原理Object.defineProperty

// vue双向数据绑定的原理


let VueObj={
    data:{
        msg:"hello world"
    }
}
Object.defineProperty(VueObj,'msg',{
    get(){
        console.log("获取数据msg"+ this.data.msg);
        return this.data.msg
    },
    set(val){
        console.log("修改数据msg"+val);
        this.data.msg=val
    }
})

//当我们获取Vue.msg  就会访问data.msg
/*
Vue={
    msg:"",//双向绑定添加的  带有set和get
    data:{msg:""}
}
*/
console.log(VueObj.msg);//获取 执行get  返回的是this.data.msg

//修改
VueObj.msg="我是大帅逼"修改 执行set  把this.data.msg修改了
//再次获取
console.log(VueObj.msg);

//总体来说就是把 data的属性 都映射到Vue的上面   并设置get  set
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
30
31
32
33
34

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue的引入 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="../src/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{reverseStr}}</h1>
        <button v-on:click="changeMsg">变化</button>
    </div>
    <script>
        let app=new Vue({
            el:"#app",//虚拟节点绑定的元素  ""是选择器
            data:{
                msg:"hello world",//数据 双向的数据
            },
            //计算属性 他是属性 属性就是一种值 和method是有区别的
            //计算属性会进行缓存  不会多次执行
            computed: {
                reverseStr(){
                    return this.msg.split("").reverse().join("")
                }
            },
            //  这里面 通常都是事件函数  根据事件例如click进行响应的操作
            methods: {
                changeMsg(){
                    this.msg="我是双向数据修改的"
                }
            },
            //监听数据 就是把这里的操作 放到 set当中
            //类似于发布定于的模式
            watch: {
                msg(newVal,oldVal){
                    console.log("数据监听 发现变化了");
                }
            },


        })

        // vue双向数据绑定的原理


        let VueObj={
            data:{
                msg:"hello world"
            }
        }
        Object.defineProperty(VueObj,'msg',{
            get(){
                console.log("获取数据msg"+ this.data.msg);
                return this.data.msg
            },
            set(val){
                console.log("修改数据msg"+val);
                this.data.msg=val
            }
        })

        //当我们获取Vue.msg  就会访问data.msg
        /*
        Vue={
            msg:"",//双向绑定添加的  带有set和get
            data:{msg:""}
        }
        */
        console.log(VueObj.msg);//获取 执行get  返回的是this.data.msg

        //修改
        VueObj.msg="我是大帅逼"修改 执行set  把this.data.msg修改了
        //再次获取
        console.log(VueObj.msg);

        //总体来说就是把 data的属性 都映射到Vue的上面   并设置get  set

    </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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

相关阅读:
新零售标杆 SKG 全面拥抱 Serverless，实现敏捷交付
 java 八股文基础每天笔记随机刷
 bitset位集学习
 【算法|动态规划No.27】leetcode516. 最长回文子序列
 【JAVA-Day04】Java关键字和示例：深入了解常用关键字的用法
 LabVIEW中管理项目
 【数据结构】图的存储结构（邻接矩阵）
论文辅助笔记：t2vec 数据预处理
 CountDownLatch源码分析
 Vue3-provide 和 inject 跨组件传递数据
原文地址：https://blog.csdn.net/weiyi47/article/details/134216869