vue中数据劫持代理

1.vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名，而不用写成this.data.属性名
2.实现原理主要就是用到了Object.defineProperty（）方法，具体实现代码如下

<script type="text/javascript">//模拟组件datalet data = {userName :'玄猫',year:18}//模拟组件实例let _this = {}for(let item in data){//利用object.defineProperty()Object.defineProperty(_this,item,{// 获取代理的item属性值时调用get方法get(){return data[item]},// 修改代理的item属性值时调用set方法set(newValue){// _this.item = newValue  不能这么写，要不会进入调用set的死循环data[item] = newValue}})}console.log(_this)// 没有set方法而直接修改时会修改不成功，因为不允许在_this上直接修改其代理的属性_this.userName = 'xs'console.log(_this.userName)</script>

vue中数据劫持代理相关推荐

微信小程序——数据劫持代理
index.html index.js // Vue数据劫持代理//模拟Vue中data选项 let data = {username:'小镭',age:3 }// 模拟组件的实例 let _this ...
既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异? 考点: Vue的变化侦测原理前置知识: 依赖收集.虚拟DOM.响应式系统现代前端框架有两种方式侦测变化,一 ...
vue中数据异步更新($nextTick)的问题
在vue中数据向视图上进行更新的操作,是异步的异步的就意味着,在代码中更改完数据之后,直接去访问页面中的元素中的内容,还是老数据那么如何去解决这个问题呢? vue中提供了$nextTick方法: ...
微信小程序 03 数据劫持代理和事件绑定
3.1 Vue 中 data 选项是怎么做到的呢 ? 利用 Object.defineProperty 就能做到数据双向绑定. Object.defineProperty(属性所在对象,属性的名字 ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
vue中数据之间的传递用propos
子集父集以上是子父集互相传递数据. 传参数的时候是以对象的形式展示的,封装在propos中的. 如果默认值是string或者number类型,那么可以用default表示. 如果默认值是objec ...
Vue中配置服务代理（proxy)
第一步:在 Vue.config.js 里配置以下代码 : /**vue.config.js**/const { defineConfig } = require('@vue/cli-service ...
vue中通过第三方代理解决跨域问题
最近在学node,遇到了跨域的问题,来记录下方法首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的 ...
Vue学习：Vue中的数据代理
一.回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数: 1.属性所在的对象: 2.属性的名字: 3.一个描述 ...

vue中数据劫持代理

vue中数据劫持代理相关推荐

最新文章

热门文章