Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue 源码学习 #61

Open
hoperyy opened this issue Oct 11, 2017 · 0 comments
Open

vue 源码学习 #61

hoperyy opened this issue Oct 11, 2017 · 0 comments

Comments

@hoperyy
Copy link
Owner

hoperyy commented Oct 11, 2017

Vue 技术内幕

http://hcysun.me/vue-design/art/1start-learn.html

了解 Vue 这个项目

  • vue 使用 rollup 构建
  • 持续集成
  • examples 目录的借鉴意义:测试时需要各种 example 页面测试
  • 利用 flow 实现类型声明
  • 测试 test 目录

Vue 构造函数

以一个例子为线索

  • perf 是通过 window.performance 实现的。perf.mark / perf.measure / perf.clearMarks / perf.clearMeasures

Vue 选项的规范化

  • 针对有多重写法的 props 等,通过一系列的 normalize 方法统一形态
  • 非生产环境会给与警告,生产环境则不会

Vue 选项的合并(没有看完)

  • mergeOptions 返回了一个新对象

Vue 的初始化之开篇

  • 对是否支持 Proxy 的判断

    const hasProxy =
    typeof Proxy !== 'undefined' &&
    Proxy.toString().match(/native code/)
  • 通过 Proxy 拦截属性的访问等

  • 通过 with 指定上下文环境为 vm._renderProxy,而 _renderProxy 已经通过 Proxy 拦截,可以在开发阶段做各种提示

揭开数据响应系统的面纱

  • observe 函数是 data 转换成响应式数据的核心入口
  • props优先级 > data优先级 > methods优先级
  • 避免重复观测对象的方法:定义属性 __ob__
  • 可扩展的对象才会被观测
  • 满足了五个条件的对象才会被观测
  • Object.getOwnPropertyDescriptor(obj, key) 获取对象属性的描述符
  • 每个属性维护了自己的一个 dep
  • 依赖收集的时机就是属性被访问的时候
  • NaN === NaN // false 判断是否是 NaN 的方法:value !== value
  • 对数组的处理,是代理了能够修改数组本身的方法:push pop shift unshift reverse sort splice
  • 对数组响应式的处理,重点关注增加元素的操作,因为需要观察新增元素
  • vue 无法监听属性的添加或删除,因此定义了 Vue.setVue.delete,实例也有 vm.$setvm.$delete 是其别名
@hoperyy hoperyy added 2017 and removed 前端 / Vue labels Oct 12, 2017
@hoperyy hoperyy closed this as completed Apr 29, 2018
@hoperyy hoperyy reopened this May 29, 2018
@hoperyy hoperyy changed the title vue 源码学习之:如何监听一个对象的变化 vue 源码学习 Nov 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant