Vue2中响应式的原理

Vue2中实现响应式的原理

vue2实现原理

使用Object.defineProperty()的get()与set()来实现响应式

javascript 复制代码
<script>
    let p = {}
    let person = {
        name: "张三",
        sex:"男",
        hobby: ["吃饭","睡觉"]
    }
    Object.defineProperty(p,"age",{
        // value: 18,
        // enumerable: true, //是否可以遍历,默认 false
        // writable: true,  //是否可以修改,默认 false
        configurable: true, //是否可以被删除,默认 false
        get(){
            console.log("有人读取了age属性")
            return p.age;
        },
        set(value){
            console.log("有人修改了age属性")
            p.age = value
        }
    })
</script>

Vue2响应式存在的问题

  1. 对象增加属性
javascript 复制代码
this.$set(this.perosn,'age',30)
Vue.set(this.person,"age",30)
  1. 删除对象属性
javascript 复制代码
this.$delete(this.perosn,'age')
Vue.delete(this.person,"age")
  1. 修改数组
javascript 复制代码
this.$set(this.person.hobby,0,"学习")
Vue.set(this.person.hobby,0,"学习")
this.person.hobby.splice(0,1,"学习")
相关推荐
玲小珑21 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子23 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er23 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131311 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo11 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴12 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript