Vue2原理学习

本篇笔记学习，参考自尤雨溪课程Vue Workshop:Advanced Features from the Ground Up

笔记目录

TODO：写完笔记再来完善

• Intro
• Fundamentals:Reactivity
• Fundamentals:Writing Plugins
• Fundamentals:Render Functions
• State Management
• Routing
• Form Validation
• i18n

背景思考

let a = 10
let b = a * 10

思考：当a发生变化时，如何让b自动更新？

onStateChange(() => {
  b = a * 10
})

onStateChange如何实现? 如果可以实现，通过监听状态的变化，来实现视图的更新渲染，则是响应式框架的核心。

onStateChange(() => {
 view = render(state) 
})

认识：基本原理

let update
const onStateChange = _update => {
  update = _update
}

const setState = newState => {
  state = newState
  update()
}

实际上就是将更新函数暂时存到外部，当状态发生改变时，调用更新函数，实现视图的更新。（更新函数用于处理视图渲染的逻辑，实际上就是渲染函数）。

需要限制用户不能随意去调用更新函数，必须要求，通过调用特定函数变更状态，才能调用更新函数。 以上其实是React实现的基本原理。

Vue将这些动作封装了起来，它将你的对象转换成响应性的对象，当状态发生变化，自动调用更新函数。接下来让我们学习一下Vue是如何实现响应性的。