Javascript
vue的生命周期
Vue生命周期：一个Vue实例从创建到销毁的过程。 Vue组件也可以看成一个Vue实例。
Vue实例做了什么：
将模板内容编译，替换掉原有的html节点
1：模板内容：由template选项确定。
2：编译：将模板编译成真实的DOM,渲染/挂载到html中。
3：原有的html节点：由el选项确定。
created之前做了什么：
initLifecycle(vm) //初始化生命周期
initEvents(vm) //初始化事件
initRender(vm) //初始化渲染
callHook(vm, 'beforeCreate')/**initInjections与initProvide配套使用,将父组件_provided定义的值，通过inject注入到子组
件，且这些属性不会被观察
栗子：<div id="app">
<p>{{message}}</p>
<child></child>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: '第一个vue实例'
},
components: {
child: {
template: "<div>{{a}}</div>",
inject: ['a']
}
},
provide: {
a: 'a'
}
})
</script> */initInjections(vm)
/*主要操作数据 props、methods、data、computed、watch 以及Observer、 Dep和Watcher
数据代理 vm.msg 实际上访问的是vm._data.msg vm.$data实际访问的是vm._data
_data是Vue实例的私有属性 */initState(vm)
initProvide(vm)
callHook(vm, 'created')
//判断用户是否传入了el选项，传入了则调用mount函数，没传入则不执行mount相关的生命周期
//需要手动调用$mount方法挂载时 mount相关的生命周期被调用了 进入下一个生命周期阶段
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
app
</div>
</body>
<script>
const vm = new Vue({
// el:"#app",//指定渲染到哪个节点
data:{
msg:'hello vue'
},
//编译模板，挂载到(替换掉)原有的节点(el指定的html节点)
// 1：编译模板 解析template中的内容 将{{msg}}替换成hello vue 变成 <div>hello vue</div>
// 2: 将编译后的结果<div>hello vue</div>，挂载到el指定的dom元素 <div id="app"></div>
template:'<div>{{msg}}</div>',
methods:{
init(){
console.log("方法");
}
},
/*
beforeCreate
vue实例刚创建出来，还没有初始化Vue实例中的数据和方法
不可以访问 data和 methods
获取不到$el
*/
beforeCreate :function() {
console.log(this.msg);//undefine
console.log(this.init);//undefine
},
/*
vue实例创建完成
created函数 完成对data的里的数据初始化,响应式 最早可以处理数据相关逻辑的生命周期函数
可以访问data，methods ，props,compute,watch
获取不到$el,不可以进行dom操作
*/
created: function(){
console.log(this.msg);//vue
console.log(this.init);//方法
console.log("created...",this.$el);//undefined
},
/*
beforeMount
完成了模板的编译，根据data中的数据和指令生成了html,还没有渲染 仅在内存中，但是还没
有挂载到页面中
最后一次处理data数据的生命周期函数
*/
beforeMount () {
console.log("beforeMount...",this.$el); <div id="app">app</div>
},
/*
手动写render， return 的节点 代替了templalte的模板内容
没有手写render 会根据template生成render函数
*/
render(h){
return h('h2',{},this.msg)
},
/*
调用mouted时，表示Vue已经编译好了最终模板，可以拿到渲染之后的内容了
进行dom操作
*/
mounted () {
console.log("mounted...",this.$el);//挂载后 模板编译后的内容替换掉原有的el指定的dom元素
}, <h2>hello vue</h2>
beforeUpdate () {
console.log(this,"beforeUpdate");
},
updated () {
console.log(this,"updated");
},
beforeDestroy () {
console.log(this,"beforeDestroy");
},
destroyed () {
console.log(this,"destroyed");
}
})
/*
没有指定el的内容时，需要手动调用mount 触发beforeMount,mount生命周期函数
*/
vm.$mount('#app')
</script>
</html>
-
Vue2面试真题详解与实战教程12-27
-
Vue3面试真题详解与实战攻略12-27
-
JS大厂面试真题解析与实战指南12-27
-
JS 大厂面试真题详解与实战指南12-27
-
React 大厂面试真题详解及应对策略12-27
-
Vue2 大厂面试真题详解及实战演练12-27
-
Vue3 大厂面试真题详解及实战指南12-27
-
Vue3大厂面试真题详解与实战攻略12-27
-
React入门教程：从零开始搭建你的第一个React应用12-26
-
Vue2入门教程：轻松掌握前端开发基础12-25
-
Vue3入门指南：快速搭建你的第一个Vue3项目12-25
-
JS基础知识入门教程12-25
-
React基础知识详解：从入门到初级应用12-25
-
Vue3基础知识详解与实战指南12-25
-
Vue3学习：从入门到初步掌握12-25
