Vue2.x源码分析(二):Vue实例挂载的实现

Vue源码分析 + 逐行注释 Github地址

Vue实例挂载阶段,这里只分析web平台的实现,web平台的入口文件是src/platforms/web/entry-runtime-with-compiler.js,在此文件中Vue通过$mount方法进行实例挂载。

Vue挂载阶段都做了什么?

src/platforms/web/entry-runtime-with-compiler.js文件$mount方法定义之前,$mount已经在runtime(src/platforms/web/runtime/index.js文件)里定义了一遍,在该文件里刚开始就对·$mount做一个缓存,缓存为mount变量,方便之后使用。

mr-progress-vue文档

简单demo查看

文件dome/index.html,只有两个最基础demo

详细演示查看

按步骤执行

npm install or yarn install

npm run serve or yarn serve

使用方式

可使用npm install mr-progress-vue --save进行安装

同时可引入lib文件夹下progress.umd.min.js进行使用

本项目依赖于Vue2.x,请自行安装

Vue2.x源码分析(一):new Vue发生了什么

Vue源码分析 + 逐行注释 Github地址

new Vue()做了什么?

首先,Vue会判断当前的this是否是Vue实例,如果是则会调用this._init()初始化Vue配置,如果不是则抛出警告

代码src/core/instance/index.js

1
2
3
4
5
6
7
8
function Vue(options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}

Vue侦听器watch获取this报undefined

错误代码

1
2
3
4
5
6
7
8
watch: {
data: {
handler: (newVal) => {
this.info = newVal
},
deep: true
}
},

修正后代码

1
2
3
4
5
6
7
8
watch: {
data: {
handler: function (newVal) {
this.info = newVal
},
deep: true
}
},

原因

总的来说还是 this 指向问题,可以查看普通函数与箭头函数 this 指向问题

vue-awesome-swiper报错踩坑记

nuxt.js 引入 vue-awesome-swiper 后,控制台报错window is not defined
window is not defined

原因:

Nuxt 在服务端渲染时找不到 window

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×