vue
2020-05-18 13:56:13 0 举报AI智能生成
深入剖析Vue原理，源码解析，不定期更新
作者其他创作
大纲/内容
组件
几个基础属性
$children
$refs
$root
$parent
$attr
$listeners
provide
provide
类似于data
隔代传参
inject
vue-router
hash
pushState
vuex
vue plugin
render(h)
vue.util.defineReactive
new Vue
es6 class
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)
覆盖那些能够修改数组的更新方法，使其可以通知更新
['push', 'pop', 'shift', 'unshift'].forEach(method => {
arrayProto[method] = function() {
// 执行原来的方法
originalProto[method].apply(this, arguments);
//
};
})
arrayProto[method] = function() {
// 执行原来的方法
originalProto[method].apply(this, arguments);
//
};
})
将得到的新的原型设置到数组实例原型上
完成k-model
value设定
事件绑定 - 给数据赋值
@xx
是节点元素
@开头
事件绑定
注意绑定事件的指向
const fn = this.$vm.$options.methods[exp]
node.addEventListener(dir, fn.bind(this.$vm));
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
var judy = Vue.extend({
template:'<p>{{message}}</p>',
data: function () {
return{
message:'I am Judy'
}
}
});
var vm = new judy().$mount('#app')
template:'<p>{{message}}</p>',
data: function () {
return{
message:'I am Judy'
}
}
});
var vm = new judy().$mount('#app')
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
$parent, $root, $children, $refs
initEvents
事件监听
$children
data
props
整体流程
new Vue( )
init( )
$mount( )
render( )
_update( )
数据响应式过程
state.js
initData( )
observe
返回一个OB 的实例
Observer
判断类型
defineReactive(obj, keys[i])
具体响应式定义
Dep
异步更新
作业
set
数组
对象
1, key 存在
2. 是响应式，直接返回
del
watch
异步更新
Queue
批量执行
Promise / MutationObserver
setImmediate
setTimeout
微任务、宏任务
第二课
子主题
题目
vue是怎么实现双相绑定的
vue3和vue2的区别
webpack打包原理
webpack插件怎么写
Vue 的 EventBus
EventBus.$emit('amsg')
触发事件
EventBus.$on('amsg')
监听事件
有隐患
页面刷新
多次触发
全局EventBus
0 条评论
下一页
