"vue2.x双向数据绑定原理?"

转载翻译原创

问答题 · 前端 · vue · @{ formatTime(detail.create_time) }

vue2.x双向数据绑定原理?

vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值get()和设置属性值set()的操作来实现的。

// Object.defineProperty()方法
let obj = {}
let name
Obejct.defineProperty(obj,'name',{
  get: function() {
    console.log('获取')
    return val
  }
  set: function(newVal) {
    console.log('设置')
    }
})
obj.name = 'arthas' // 在给obj设置name属性的时候，触发了set这个方法
const val = obj.name // 在得到obj的name属性，会触发get方法。

PS：写作不易，如要转裁，请标明转载出处。

猜你想看: Vue组件通信方式有哪些？; 简述computed原理？; Vue2.x和Vue3.x有什么区别?; Vue中$nextTick()的使用; Vue 的父组件和子组件生命周期钩子函数执行顺序？; vue中v-if和v-show有什么区别？; Vue.js 3.0 响应式系统的实现原理？; vue3 watch和watchEffect的作用与区别？

回顶部