vue数据劫持代理

最新推荐文章于 2024-04-14 18:23:12 发布

小白小白不吃白菜

最新推荐文章于 2024-04-14 18:23:12 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/qq_42727641/article/details/123280041

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//模拟vue中data选项
let data = {
  username:'curry',
  age:18
}
//模拟组件的实例
let _this = {
}
//利用Object.defineProperty()
for(let item in data){
  Object.defineProperty(_this,item,{
    //get:用来获取扩展属性值的，当获取该属性值的时候调用get方法
    get(){
      return data[item]
    },
    //set:监视扩展属性的，只要一修改就调用
    set(newValue){
      //_this.username = newValue为错误方式
      //千万不要在set方法中修改当前扩展属性的值，会出现死循环
      data[item] = newValue
    }
  })
}