key value vue 输出_手写Vue

欢迎来到前端菜鸟逆袭架构师。

如果你也喜欢前端或从事前端工作的化，可以关注一下我的公众号

?点击上面的“前端菜鸟逆袭架构师”?，进入关注页面，点击一下就可以啦✌️

1 作者简介

• 一只爱笑的前端菜鸟，梦想成为全栈架构师，为了改变世界?。
• 欢迎扫码加我微信，让世界充满爱❤️

• 

手写vue

MVVM框架

MVVM框架的三要素:数据响应式、模板引擎及其渲染

数据响应式:监听数据变化并在视图中更新:

• Object.defineProperty() 

• Proxy

模版引擎:提供描述视图的模版语法

• 插值:{ {}}

• 指令:v-bind，v-on，v-model，v-for，v-if

渲染:如何将模板转换为html

• 模板 => vdom => dom

数据响应式原理

数据变更能够响应在视图中，就是数据响应式。vue2中利用 Object.defineProperty() 实现变更检测。

写下代码

const obj = {}

function defineReactive(obj, key, val) {

          Object.defineProperty(obj, key, {
    

              get() {

              console.log(`get ${
    key}:${
    val}`);              return val						

            },           set(newVal) {
    					

              if (newVal !== val) {
                    console.log(`set ${
    key}:${
    newVal}`);                val = newVal						

                }
            }

          })

    }

    defineReactive(obj, 'foo', 'foo')

    obj.foo
    obj.foo = 'foooooooooooo'	

执行上述脚本：node defineProperty.js

执行结果如下：

结合一下视图，使上述程序与html联系起来

lang="en">

id="app">


update函数是真正的做dom操作的，update执行完更新之后，希望当obj这个数据发生变化之后，是不是能驱动一下界面的更新。在vue中，不希望每次update函数需要自己写，所以有了编译器的诞生。那么，什么是编译器？就是在html中写一些特别的语法。执行一下编译器，编译器就会自动的生成一个更新函数。

遍历需要响应化的对象  

// 对象响应化:遍历每个key，定义getter、setter

function observe(obj) {

  //判断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}}

observe(obj)

obj.foo
obj.foo = 'foooooooooooo'

obj.bar
obj.bar = 'barrrrrrrrrrr'

obj.baz.a = 10 // 嵌套对象no ok

执行脚本：node defineProperty.js 执行结果如下：