initProvide(vm) // resolve provide after data/props
callHook(vm, ‘created’)
/* istanbul ignore if */
if (process.env.NODE_ENV !== ‘production’ && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(vue ${vm._name} init
, startTag, endTag)
}
if (vm.$options.el) {
vm. m o u n t ( v m . mount(vm. mount(vm.options.el)
}
}
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等,vue 把不同的功能逻辑拆成一些单独的函数执行。
我们关注到,在这个过程中插入钩子函数,提供给开发者调用的机会。在初始化的最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm,挂载的目标就是把模板渲染成最终的 DOM。
2.生命周期钩子
- 生命周期钩子自动绑定this到实例上,因此你可以通过this.操作访问到数据和方法。注意不能使用箭头函数例如下方代码,因为箭头函数绑定外层的this会一直往上找。
created:()=>{// …代码}
- 下面用在各个生命周期中打印下el,data,dom节点
export default {
name: ‘App’,
data() {
return {
title: ‘标题’
}
},
methods: {
onDestoryClick() {
this.$destroy()
}
},
beforeCreate() {
console.log(
`\n\nbeforeCreate打头\n e l : el : el:{this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(
this.$data
)}\n r e f s . h e a d : refs.head : refs.head:{JSON.stringify(
this.$refs.head
)}\nbeforeCreate结尾\n\n`
)
console.log(this.$vnode)
},
created() {
console.log(
`\n\ncreated打头\n e l : el : el:{this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(
this.$data
)}\n r e f s . h e a d : refs.head : refs.head:{JSON.stringify(this.$refs.head)}\ncreated结尾\n\n`
)
console.log(this.$vnode)
},
beforeMount() {
console.log(
`\n\nbeforeMount打头\n e l : el : el:{this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(
this.$data
)}\n r e f s . h e a d : refs.head : refs.head:{JSON.stringify(this.$refs.head)}\nbeforeMount结尾\n\n`
)
console.log(this.$vnode)
},
mounted() {
console.log(
`\n\nmounted打头\n e l : el : el:{this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(
this.$data
)}\n r e f s . h e a d : refs.head : refs.head:{JSON.stringify(this.$refs.head)}\nmounted结尾\n\n`
)
console.log(this.$vnode)
}
}
可以发现
-
beforeCreate中拿不到任何数据,它在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
-
created中已经可以拿到data中的数据了,但是dom还没有挂载。会判断有无el,如果没有el则停止后面的模板挂载。
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
使用场景:ajax请求和页面初始化
-
beforeMount 和 created 拿到的数据相同 在挂载开始之前被调用:相关的 render 函数首次被调用。
-
mounted中el被创建dom已经更新,vue实例对象中有template参数选项,则将其作为模板编译成render函数,编译优先级render函数选项 > template选项
使用场景:常用于获取VNode信息和操作,ajax请求
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
-
由于beforeUpdate和updated使用的比较少,一般用计算属性和watch代替所以在此不在说明
-
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
客户端渲染过程
-
处理 HTML 标记并构建 DOM 树。
-
处理 CSS 标记并构建 CSSOM 树。
-
将 DOM 与 CSSOM 合并成一个渲染树。
-
根据渲染树来布局,以计算每个节点的几何信息。
-
将各个节点绘制到屏幕上。
最后,给大家分享一份2021最新Vue面试题含源码解析。由于篇幅原因,仅展示一部分面试题详解,更多最新的Vue面试题整理成了一个PDF,需要的朋友【点这里】免费领取。
vue-cli工程
-
构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?
-
vue-cli 工程常用的 npm 命令有哪些?
-
请说出vue-cli工程中文件夹和文件的用处
-
config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
-
请你详细介绍一些 package.json 里面的配置
vue核心知识点
-
对于Vue是一套渐进式框架的理解
-
vue.js的两个核心是什么?
-
请问 v-if 和 v-show 有什么区别
-
vue常用的修饰符
-
v-on可以监听多个方法吗?
-
vue中 key 值的作用
-
vue-cli工程升级vue版本
-
vue事件中如何使用event对象?
-
$nextTick的使用
-
Vue 组件中 data 为什么必须是函数
-
v-for 与 v-if 的优先级
-
vue中子组件调用父组件的方法
-
vue中 keep-alive 组件的作用
-
vue中如何编写可复用的组件?
-
什么是vue生命周期?
-
vue生命周期钩子函数有哪些?
-
vue如何监听键盘事件中的按键?
-
vue更新数组时触发视图更新的方法
-
vue中对象更改检测的注意事项
-
解决非工程化项目初始化页面闪动问题
-
v-for产生的列表,实现active的切换
-
v-model语法糖的组件中的使用
-
vue中自定义过滤器
-
vue等单页面应用及其优缺点
-
什么是vue的计算属性?
-
vue-cli提供的几种脚手架模板
-
vue父组件如何向子组件中传递数据?
-
vue弹窗后如何禁止滚动条滚动?
-
计算属性的缓存和方法调用的区别
-
vue-cli中自定义指令的使用
vue-router
-
vue-router如何响应 路由参数 的变化?
-
完整的 vue-router 导航解析流程
-
vue-router有哪几种导航钩子( 导航守卫 )?
-
vue-router传递参数的几种方式
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-router 导航解析流程
-
vue-router有哪几种导航钩子( 导航守卫 )?
-
vue-router传递参数的几种方式
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】