new Vue 做了什么
执行 init 方法:先是对 options 进行合并,接下来执行一系列的 init 方法,尤其是 initState 的 proxy 处理(使用代理:this.name
等价于 this._data.name
,接着执行 observe 响应式处理),之后执行 $mount 。
$mount 做了啥
在源码里面有多个文件都有同名定义,这里只看 web 平台(源码文件 platforms/web)。 在 compiler 版本里,处理 el ,如果没有 render 就尝试获取(对 template 进行处理转化成编译的 render 函数,最终挂到 vm.$options.render 上),然后再执行 mount 方法(其实调用 mountComponent 方法)。mountComponent 方法内定义 updateComponent 函数(这个函数做真实的渲染,其实是用来渲染 watcher 的)。
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
讲讲 render
通过 createElement 方法生成 vnode (Virtual DOM)。核心代码如下:
vnode = render.call(vm._renderProxy, vm.$createElement)
Virtual DOM
Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多。用 VNode Class 描述 vnode 。VNode 是对真实 DOM 的一种抽象描述,关键属性有标签名、数据、子节点等等,映射到真实的 DOM 需要经历 VNode 的 create、diff、patch 等过程。
v-model 的本质
深入响应式原理
优先级:data > props > methods > computed computed 缓存原理 :在于 Watcher 实例上的 dirty 属性,下面代码来自 createComputedGetter 函数内:
if (watcher) {
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
return watcher.value
}
computed 和 watch 区别:computed 默认懒执行,且不可更改,但 watcher 可配置;使用场景不同,computed 不可使用异步(可以依赖 Vuex 中的数据,故通过返回 store.state 可以获得异步操作的结果,也可以借助插件 vue-async-computed),watch 可以处理异步