vue生命周期详解
1. 什么是生命周期呢？
- 当前组件在创建到销毁经历的一系列过程，称之为生命周期
- 生命周期的分为几个阶段？每个阶段有哪些钩子函数 ？
- 生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁
初始化阶段：有4个钩子函数 ， 触发条件是自动的
beforeCreate
1 组件即将创建，进行组件事件和生命周期的初始化
2 项目中一般不使用
3 有的开发者也会在这里进行数据请求
created
1. 组件创建完成
2. 项目中：
1） 异步请求接口数据
2） 数据修改
beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实 例组件中的其他子组件是否有template选项，如果没有，那么使用 outerHTML插入
3. 项目中：
1） 异步请求接口数据
2） 数据修改
mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1） 异步请求接口数据
2） 数据修改
3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可 以进行第三方库的实例化（静态数据渲染来的）
总结： 初始化过程中在项目中使用
数据请求：created
DOM操作： mounted
数据修改： beforeMount created mounted
运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时
beforeUpdate：
内部操作 ： vdom生成和diff的对比 我们可以不使用
updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方
销毁阶段： 有2个钩子函数
beforeDestory: 组件即将销毁，准备调用 $destroy() 方法 destoryed： 组件销毁结束
这两个钩子函数没有什么区别，功能很相似
项目中：这两个钩子函数都可以用来做善后,把一些计时器，第 三方库实例化出来的实例
组件销毁的两种方式：
- 使用$destroy()方法（内部销毁）
缺点： 会将组件的模板也保留下来 - 使用开关销毁（外部销毁） v-if
这种类型的销毁不会留有模板
有一个钩子函数可以不写，这个钩子函数就是我们 render 函数
名词解释：
- 钩子函数： 钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发
- 除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
- 为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的 - 为什么返回值是对象？
原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter - 其他选项写在生命周期的上面
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
//初始化
beforeCreate () {
/*
这个阶段：组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中： 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段：
data: 可以获得数据
RDOM: 拿到了
项目中：
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
*/
this.time = setInterval( () => {
console.log( 1 )
},1000)
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同（patch对象）
/*
这个阶段：
data: 拿到了
RDOM： 获得
这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段：
动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
console.log( 'beforeDestroy ')
},
destroyed () {
clearInterval( this.time )
console.log( 'destroyed')
}
})
new Vue({
// el: '#app',
data: {
msg: 'hello 1902',
flag: true
}
}).$mount('#app')
过滤器：
vue 1.x内部提供提供了 10 个过滤器， 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化 什么叫过滤器？
格式化数据的一个工具
举例： 12.22225 —> 12.2 Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28
过滤器一样也有两种声明形式
全局声明
Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value value值就表示的是格式化数据的值
局部声明
new Vue({ filters: { '过滤器名称'： function( value ){ return } } })
过滤器的回调函数必须有返回值
如何使用使用过滤器？ 我们用一个叫做管道符的来使用过滤器