MVVM框架的三要素：資料響應式、模板引擎及渲染

資料響應式：監聽資料的變化在檢視中更新

• Object.defineProperty()
• Proxy

//物件響應式原理
//1 Object.defineProperty()
function defineReactive(obj, key, val) {
  //val 可能是物件，需要遞迴處理
  observe(val)
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', val)
      return val
    },
    set(newval) {
      
 
if (newval != val) {
        observe(newval)
        console.log('set', newval)
        val = newval
      }
    },
  })
}

//物件響應式處理
function observe(obj) {
  //判斷obj型別必須是物件
  if (typeof obj != 'object' || obj == null) {
    return
  }
  Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
}
 
//設定新的屬性 類似$set
function set(obj, key, val) {
  defineReactive(obj, key, val)
}
const obj = { name: 'aa', age: 11, baz: { a: 1 } }
observe(obj)
// obj.name
// obj.name = 'fffff'
//1 物件巢狀 就用到了遞迴，在defineReactive 裡面再呼叫一次 observe(val)
// obj.baz.a

//2 這種情況 在set裡面再呼叫一次observe(val)
//obj.baz={a:10}

//3 設定新的obj屬性 類似$set
set(obj, 'dong', 'dong')
obj.dong
 

模板引擎：提供描述檢視的模板語法

• 插值：{{}}
• 指令：v-bind, v-on, v-model, v-for, v-if

渲染：講模板轉換成html

• 模板 =>vdom=>dom