接下来讲一讲Vue的数据代理

首先讲一下原生js的数据代理

原生的 Object.defineProperty()

javascript 复制代码
        
        let aa = 'wewew'
        let person = {
            name: "王李斌",
            age: 12
        }
Object.defineProperty(person, "address", {
            // value: 14, 给字段设置值
            //enumerable:true, 设置动态设置的字段为可以遍历
            //writable:true, 设置动态设置的字段为可以修改
            //configurable:true, 设置动态设置的字段为可以删除
            get() {
                return aa
            }
            set(value){
           aa='wlb'

        }
        })

可以通过这个方法动态的为对象添加字段,并未对象字段设置数据代理

vue中的数据代理

javascript 复制代码
        const x = new Vue({
            el: "#root",
            data: {
                name: "你爸爸",
                age: 14,
                app: "http://baidu.com"
            }
        })

 

这段代码应该见怪不怪了,我们创建vue对象的时候会创建一个data对象传给_data,实际上data和vm中的_data就是完全一样的,我们修改其中一个,另一个的值也会变,其实我们写到这vue也是可以帮我们自动刷新页面修改数据的,看如下代码:

javascript 复制代码
<body>
    <div id="root">
        <h1>hello,{{_data.name}}</h1>
        <h1>年龄,{{_data.age}}</h1>
        <a v-bind:href="app">点我</a>
        <input type="number" v-model="_data.age">
    </div>
    <script>
        Vue.config.productionTip = false

        const x = new Vue({
            el: "#root",
            data: {
                name: "你爸爸",
                age: 14,
                app: "http://baidu.com"
            }
        })
        // x.$mount('#root')
    </script>

</body>

我们都知道在vue的模板中,我们可以直接访问vm对象中的所有参数,那我们可以直接访问vm中的_data来访问具体的参数,当修改data参数时,页面一样会刷新,那么和我们说的数据代理有什么关系的,当然有关系,如果都像{{_data.name}}这么写,岂不是要麻烦死,于是vue就通过 Object.defineProperty()帮我们把data的中的所有参数都在vm对象中重新创建了一份,并且通过它的get方法和set方法,指向了vm对象中的_data中的对应参数,这样我们在写的时候就可以直接写成{{name}},帮我们简化了编写的方式

相关推荐
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式