VUe.js基础

Posted 2022-08-10 zhangzhouy

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