VUe.js基础

1.3 MV*模式介绍

MV*模式图示

1.4 Vue实现数据绑定的原理

1. 书写第一个Vue案例

2. Vue深入响应式原理图

    

    // 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设置，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新

       • 监听： 选项/watch