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

最新推荐文章于 2024-06-13 23:47:14 发布

小墨蛇

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量202

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weiyi47/article/details/134216869

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue的代码方式

引入vue

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

结构布局

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

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("数据监听 发现变化了");
	     }
	 },


})

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

完整代码

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