Vue的响应式

Vue2中,实现响应式的原理是使用ES5的Object.defineProperty,重写了几乎所有属性的getter和setter。

  1. Object.defineProperty
    1.1 可配置的属性:
const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false,
  enumerable: false,
  get(){
    
  },
  set( newValue ){
  
  },
  
});

// test
object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42
for(let k in object1){
  console.log(k) // without property1
} 


vue作者,尤雨溪亲自讲解vue高级特性,包括响应系统、自定义插件、render函数、状态管理、路由、表单验证和国际化。
课程练习代码github:https://github.com/zhengguorong/vue-advanced-workshop
讲义不定时更新:https://vue-course-doc.vercel.app/
中文字幕已经全部翻译

posted @ 2020-09-15 12:31  Bravo_Jack  阅读(175)  评论(0编辑  收藏  举报