一:Vue对象创建和销毁钩子函数:
beforeCreate:对象初始化之前,data钩子函数初始化之前,dom对象没创建。
create:对象已经创建,data钩子函数已经初始化,dom对象没创建。
beforeMount:对象已经创建,data钩子函数已经初始化,dom对象已创建,data数据没有挂载到dom的指令中。
mounted:对象已经创建,data钩子函数已经初始化,dom对象已创建,data数据已经挂载到dom的指令中。
beforeDestroy:对象存在,data数据存在,dom对象销毁之前。
destroy:对象已经销毁,dom对象可能销毁。
- new Vue()对象的时候,都做了什么操作,系统会去调用_init函数
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
/**
*第一部分,初始化属性
*/
vm._uid = uid++
let startTag, endTag
//测试相关的性能开发
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
vm._isVue = true
/**
*第二部分,合并相关option,vue会将相关的属性和方法都统一放到vm.$options中,为后续的调用做准备工作。
*/
// merge options
console.log("befor merge",vm.$options);
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
console.log("after merge",vm.$options);
/**
*第三部分,初始化相关功能
*/
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
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)
}
/**
*第四部分,mount
*/
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
- 大概创建vue对象分步图
a.合并option
b.初始化各类属性和事件,我们梳理成下面的导图
c.挂载dom
- 官方流程图
二:vue对象对应的属性和钩子函数功能
- vue对象对外暴露的钩子函数,用户可以在对应钩子函数内编写我们的业务代码。
- vue对象上面包含的方法和属性。
new Vue({
data(){ //定义基础数据,可以是各种数据类型
return{}
},
componets:{},//定义模板数据
props:{},//定义父组件向子组件传递的参数
watch:{},//监视器,监视data中某个数据的变化执行回调函数
computed:{},//计算属性,计算data中某个属性后,定义新属性,有缓存功能
methods:{},//函数集合属性,定义事件函数和其他方法
beforeCreate(){},//对象创建之前调用
create(){},//对象创建后调用
beforeMounted(){},//data数据没挂载到dom对象之前调用
mounted(){},//data数据挂载到dom对象之后调用
beforeDestroyed(){},//对象销毁之前调用
destroyed(){},//对象销毁后调用
})
三:vue对象对应的一些特殊全局方法和属性
- Vue.set()和this.$set()的使用
a.原因:动态给data里面某个对象添加属性,结果发现无法在页面上动态获取到,因为不是响应式的
data(){
return{
user:{
age:" ",
name:" ",
}
}
}
我们在方法里面添加如 this.user.sex=“男”,结果页面无法显示。
b.正确方式:Vue.set(object, propertyName, value)
Vue.set(vm.user, "sex", "男") 或者 this.$set(vm.user, "sex", "男");
- this.$nextTick(()=>{})的使用
a. 作用:dom对象渲染完毕后再执行该方法体里面的内容。 - this.ref.name的使用