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,"学习")
相关推荐
IT_陈寒1 天前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_11 天前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子1 天前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟1 天前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top1 天前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端
xiguolangzi1 天前
1panel web服务部署
前端
写不出来就跑路1 天前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
摘星编程1 天前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
醉方休1 天前
React Fiber 风格任务调度库
前端·javascript·react.js
北辰alk1 天前
React Intl 全方位解析:为你的 React 应用注入国际化灵魂
前端