浅谈vue设计核心 01-数据响应式

作者: 江川哇 | 来源:发表于2021-09-28 10:34 被阅读0次

浅谈vue设计核心 01-数据响应式
学习vue的响应式 mvvm -01 数据响应式
【浅谈Vue3 effect】
Vue 数据响应式原理
前端面试题【Day02】
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
Vue响应式原理
vue双向绑定原理
Vue.js入门（一）：模板语法、计算属性/监听器
Vue原理

vue的设计核心是 mvvm
mvvm的核心三要素：数据响应式、模板引擎、渲染
1、数据响应式：监听数据变化并且在视图中更新，vue中利用Object.defineProperty()实现变更检测
Object.defineProperty()
Proxy

简单实现：

const obj = {}
function definePropery(obj,key,val) {
  Object.definePropery(obj,key,{
    get() {
      console.log('get',val)
    }
    set(newval) {
      if(newval!=val) {
        val = newval
      }
    }
  })
}
definePropery(obj,'foo','foo')
obj.foo
obj.foo='fooooooo'

结合视图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
   <script>
      function defineReactive(obj,key,{
        get(val) {
          return val
        }
        set(newval)  {
          if(val!=newval) {
            val = newval
            update()
          }
        }
      })
      defineReactive(obj,'foo','')
      obj.foo = new Date().toLocaleTimeString()
      function update() {
        app.innetText = obj.foo
      }
      setInterval (()=>{
         obj.foo = new Date().toLocaleTimeString()
      },1000)
  </script>
  </body>
</html>

遍历要响应的对象

//对象响应化，遍历每个key,定义getter setter
function observe(obj) {
  if(typeof obj !='object' || obj==null) {
    return
  }
  Object.keys(obj).forEach(key=>{
    defineReactive(obj,key,obj[key])
  })
}
const obj = {foo:'foo',bar:'bar',baz:{a:1}}
obj.foo
obj.foo = 'fff'
obj.bar
obj.bar = 'barrrrrr'
obj.baz.a = 2 //嵌套对象no ok

解决嵌套对象用递归

function defineReactive(obj,key,val) {
  observe(val)
  Object.defineProperty(obj,key,{
    //...
  })
}

解决赋值是对象的情况

obj.baz = {a:1}
obj.baz.a = 10 //no ok
set(newval) {
  if(newval!=val) {
    observe(newval) //新值是对象的情况
    notifyUpdate()
  }
}

解决添加/删除新属性无法检测类似vue的$set

obj.dong = 'dong'
obj.dong //并没有get信息
function set(obj,key,val) {
  difineReactive(obj,key,val)
}
//测试
set(obj,'dong','dong')
obj.dong

完整代码

//对象响应式原理
//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

2、模板引擎：提供描述视图的模板语法
插值：{{}}
指令： v-bind v-on v-for v-if v-model
3、渲染：如何将模板转换成html
模板=> vdom =>dom