vue (三) ---- 异步DOM更新,$set,监听器watch过滤器,以及生命周期初识

一.异步DOM更新

DOM更新是异步的

如果真的想获取dom中的数据:

1. 延时器
2. this.$nextTick( ( )=>{ 获取 } )  DOM更新完成之后,自动回调

一次性更新的问题

数据不是以改变就会更新DOM,而是数据不变了,一次性改变的

二.$set

如果数据data里没有数据obj:{ }  ,没有name属性,但是直接加了this.obj.name= '春'

解决方法 :  

• 方法1 : 现在data里声明好,给个初始值,再使用
• 方法2 : 第三方框架里,   this.$set(this.obj , ' name ' , ' ')

三.监听器 wacth

作用 : 监听数据的变化

wacth的基本使用 

watch :{
    num(newVal,oldVal)
}

监听复杂类型 深度监听

• 方式一   obj : { deep:true ,  handler(newVal ) { }   }
• 方式二   'obj.name' (newVal) {  } 

computed和watch的区别 

computed  :  根据已知值,得到一个新值

                    新值随着已知(相关的数据)  的变化而变化

                     特点 : 别人改变, 影响了我

wacth:   监听已知值

             特点 :我改变,影响别人

四.过滤器 (格式化数据工具)

如何使用

1.先注册

全局过滤器 : 所有的vue实例里都可以使用  

                     Vue.filter('dataFliter',(res) => { return ' XXX ' })

局部过滤器 : 只有注册过滤器的当前的vue实例才可以使用

                     在vm实例中注册   :   fliter : { dateFilter(res){ return  'hehe' } }

2. 再使用  :   格式   要处理的数据 | 过滤器

moment :  安装  引入  使用  moment(res).format('YYYY-MM-DD')

传参 :  传  data | dataFliter('YYYY')  

           接    (res,str)

五.生命周期函数(钩子函数)

实例生命周期 == 组件生命周期  

钩子函数 = 生命周期函数

注意点: 1. 钩子函数vue会自动调节

             2. 钩子函数命名都是规定好的

三大阶段

1. 挂载阶段 (进入页面阶段)

>  1.数据初始化   

         beforeCreate  ----  数据响应式之前调用  

         created        -------   数据响应式之后调用

                      特点 : 可以获取data里的数据和methods 的方法

                      场景 :  发送ajax     操作data里的数据    操作本地数据

> 2. 找模板

      <h1>{{ msg }}</h1>

           el :  有 ---继续下一步          没有 :    vm.$mount('#app')    继续下一步

           tempalte :    没有 => el编译            有 => 编译template里的内容

       优先级  : template > el    (同时出现 template生效)

> 3. DOM渲染 

        beforeMount :    DOM渲染之前

        mounted :   DOM 渲染之后 

                           场景 :  1. 发送ajax请求    2. 操作DOM

2. 更新阶段(更新数据)

• boforeUpdate  更新之前
• updated   更新之后

3. 卸载阶段(页面关闭)

• beforeDestroy()   卸载之前     手动处理自己添加的定时器之类的
• destroyed()  卸载之后