首页 > 其他 > 详细

vue 实现数据绑定原理

时间:2019-08-21 21:08:40      阅读:104      评论:0      收藏:0      [点我收藏+]

 
案例: Vue 底层原理
 
// 目的: 使用原生js来实现Vue深入响应式
 
var box = document.querySelector(‘.box‘)
 
var button = document.querySelector(‘button‘)
 
var data = {
name: ‘Jick‘
}
 
// 观察者对象
 
var observer = {...data}
 
// es5提供的api方法,这个方法不兼容ie8以及以下
// Object.defineProperty(对象,对象的属性,对象属性的修饰符 )
Object.defineProperty( data,‘name‘,{
 
// get/set 统称为: ‘存储器‘
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name
双向绑定的理解
Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新

vue 实现数据绑定原理

原文:https://www.cnblogs.com/wanghsing/p/11390651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!