以下属于个人理解,如果不足请各位大佬多多提点
记忆单词 有d无d 有ed等等细节、彻底理解弄懂
Tips:components、watch、computed、methods是以:{}的方式引入,
其他是已(){}的方法引入
<template>
<div>{{b}}</div>
</template>
<script>
export default{
//data 下面要加return是局部定义变量
//data{ } 中直接定义变量是全局定义变量,可能造成数据污染
data(){
return {
a:'A'
}
},
components:{
//components 是局部组件引入
//component 是全局组件引入
//全局组件也可以用 Vue.use()引入
},
//第一个生命周期函数,表示实例被完全创建之前运行出来
//再data和methods都还没有被初始化
//在methods 和 data 之前执行
beforeCreate() {
console.log('components、watch、computed、methods是以:{}的方式引入,其他是已(){}的方法引入');
console.log('这是 beforeCreate ,data 和 methods还没初始化');
},
//第二个生命周期函数 data and methods 已经初始化好了
//created(){} data 和 methods 已经初始化 有了
created() {
console.log('我是 created ,data 和 methods 已经有了');
this.show()
},
//第三个生命周期函数,模板已经再内存中编译完成,但是尚未把模板渲染到页面中去
// beforeMount 没有e 简单理解就是 浏览器已经解析了代码 但还没渲染上去
beforeMount() {
console.log('这是 beforeMount ,已经有DOM了');
},
//watch 监听data中变量的方法 ,只有当wathc中变量改变时才会变
watch:{
'a':function(now,old){
console.log('now ',now)
}
},
//计算属性 当变量改变时会跟着变化
//如果computed和watch都能实现的功能 建议用computed
computed:{
b:function(){
console.log('这是 computed')
return this.a+this.a
}
},
//第四个周期函数内存中的模板 已经真实挂在到了页面中,可以看到渲染好的页面了,当执行完这个,实例已经完全创建好了
//mounted 执行这个时页面已经渲染出来了
mounted() { //重要
console.log('这首 mounted ,数据和页面已经好了 但是methods还没执行');
},
methods: {
show() {
console.log('show执行了');
}
},
//以上mouted()实例完毕,马上进入到运行阶段
//第五个周期函数 这俩事件会根据data数据的/*改变*/,有选择性的出发0-n次
//beforeUpdate 数据最新的 但是页面还没更新
beforeUpdate() {//这时候表示我们的界面还没有被更新,但是数据已经被更新了
console.log('这是 beforeUpdate ');
},
//第六个周期函数 执行的手页面和data的数据已经保持同步了 都是最新的
//updated 数据和页面都是最新的
updated() {
console.log('这是 updated');
},
//第七个周期函数 当执行这里的时候
//就已经从运行阶段进入到了销毁阶段了
//实例身上所有的data和所有的methods以及过滤器 指令等等,都处于可用状态,还没有真正执行销毁的过程
//beforeDestory 数据什么都能用 理解为销毁开始
beforeDestroy() {
console.log("这是 deforeDestory")
},
//第八个周期函数
//执行到这里的时候组件已经被完全销毁,组件中所有的数据方法指令过滤器 都已经不可用了
//destoryed 到这里已经全部销毁 什么都不能在用
destroyed() {
console.log('这是 destoryed')
}
}
</script>