Vue

使用JQ 和 使用框架的区别

• 数据和视图得分离，解耦（开放封闭原则 ）
• 以数据驱动视图，只关心数据变化，DOM 操作被封装

对MVVM的理解及三大要素

• MVC

Vue 的三要素

• 响应式：vue 如何监听到data 得每个属性变化？
• 模板引擎：vue 的模板如何被解析，指令如何处理
• 渲染：vue的模板如何被渲染成html?以及渲染过程

Vue中怎么实现响应式

• 什么是响应式

  • 修改data 属性之后，vue 立刻监听到
  • data 属性被代理到 vm(this)上

• Object.defineProperty

  var obj ={}
  var name = 'xzt'
  Object.defineProperty(obj,'name',{
      get : function  (){
          console.log(get)
          return name
      },
      set : function (val){
          console.log(set)
          name = val
      }
  })
  console.log(obj.name) //可以监听到
  obj.name = 'list'      //可以监听到    
  

• Object.defineProperty

• 模拟

vue 中如何解析模板

• 模板是什么
  • 本质：字符串
  • 有逻辑，如v-if v-for,必须用JS 才能实现（图灵完备）
  • 转换为html 渲染页面，必须用JS 才能实现
  • 因此，模板最重要转换成一个JS函数（render）
• render 函数
  • 模板中所有的信息都包含在render函数中
  • this 即vm
  • age 即 this.age 即 vm.age,即data 中的 price
  • _c 即this._c即vm._c
  • render 函数执行时返回vnode
  • updateComponent
• render 函数 与 vdom

vue 得整个实现流程

• 解析模板成render 函数
  • with的用法
  • 模板中的所有学习都被render 函数包含
  • 模板中用到的data 中的属性，都变成了js变量
  • 模板中的 v-model 都变成了js逻辑
  • render 返回 vnode
• 响应式开始监听
  • Object.defineProperty
  • 将 data 代理到vm上
  • 监听到 get ,减少不必要得渲染
• 首次渲染，显示页面，且绑定 依赖
  • 初次渲染，执行updateComponent,执行vm._render()
  • 执行render 函数，会访问到 vm.list 和vm.title
  • 会被响应式的get方法监听到
  • 执行updateComponent ,会走到vdom 和patch 方法
  • patch 将 vnode 渲染成DOM 初次渲染完成
• data 属性变化，触发render