vue
2020-05-18 13:56:13 0 举报AI智能生成
深入剖析Vue原理，源码解析，不定期更新
作者其他创作
大纲/内容
vue
组件
几个基础属性
$children
$refs
$root
$parent
$attr
$listeners
provide
类似于data
隔代传参
inject
vue-router
概要
url变了，页面不跳转
Vue.mixin({ beforeCreate() { ... } })
使用Map预处理数组，提高效率
设置响应式数据
new Vue({ data: { current: 1 }})
this.$options
Vue 声明全局组件
组件的写法
props
render(h) { h(component)；}
挂载$router
监听hashchange ，来渲染对应的组件
render函数
hash
pushState
vuex
vue plugin
render(h)
vue.util.defineReactive
new Vue
es6 class
class 里面的get set 方法：拦截
$store
state
mutations
commit
action
dispatch
getters
install方法
KVue
响应式实现
Object.defineProperty()
get
通知更新
set
依赖收集 Dep.addDep( )
注意点
嵌套的对象
重新赋值的对象
新加的对象
observe
数据的代理
proxy
编译 Compile
编译指令
nodeType === 1
node.attributes
k-text
text（）
k-html
html( )
@click
递归
编译插值
nodeType === 3 && \\/{/{(.*)/}/}\\
RegExp.$1
Watcher
update
依赖收集 Dep
作业
实现数组的响应式
找到数组原型
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
const originalProto = Array.prototype;
const arrayProto = Object.create(Array.prototype)
覆盖那些能够修改数组的更新方法，使其可以通知更新
将得到的新的原型设置到数组实例原型上
完成k-model
value设定
事件绑定 - 给数据赋值
@xx
是节点元素
@开头
事件绑定
注意绑定事件的指向
const fn = this.$vm.$options.methods[exp]
Vue 源码解析
搭建调试环境
clone vue源码
npm i
npm i -g rollup
修改dev 脚本：添加 --sourcemap
npm run dev
调试技巧
打开指定文件 ctrl + p
断点
单步执行
进去函数
查看调用栈 call
定位源文件所在位置
右键 reveal in sidebar
术语解释
runtime
common
esm
umd
第一天
入口：src/platforms/web/entry-runtime-with-compiler.js
$mount
el / tempalte / render
1. render 优先级最高
2. template
3. el
扩展默认$mount方法:处理template或el选项
/src/platforms/web/runtime/index.js
patch方法的安装
实现$mount
src/core/index.js
初始化全局API
src/core/instance/init.js
声明构造函数、实现若干实例方法
initLifecycle
initEvents
事件监听
data
整体流程
new Vue( )
init( )
$mount( )
render( )
_update( )
数据响应式过程
state.js
initData( )
返回一个OB 的实例
Observer
判断类型
具体响应式定义
Dep
异步更新
数组
对象
2. 是响应式，直接返回
del
watch
Queue
批量执行
Promise / MutationObserver
setImmediate
setTimeout
微任务、宏任务
第二课
子主题
题目
vue是怎么实现双相绑定的
vue3和vue2的区别
webpack打包原理
webpack插件怎么写
Vue 的 EventBus
EventBus.$emit('amsg')
触发事件
EventBus.$on('amsg')
监听事件
有隐患
页面刷新
多次触发
EventBus.$off('amsg')
全局EventBus
0 条评论
回复 删除
下一页
