Vue----生命周期函数

vm对象的生命周期函数(钩子函数,生命钩子)

相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

 

beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次

beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用

beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例

 

为什么要用生命周期函数?

0.把整个运行期间的业务区分的很明显

1.能够更好的帮助我们把产品的业务逻辑实现了

2.更有利于我们维护产品 和 修改需求

3.能够让我们写出更高质量的产品的代码​ ​ ​

 

 网络请求应该在什么钩子中,为什么?​

 可以放在data生成以后更新数据之前 的所有钩子中

具体的更具业务需求来 常见的放在created或者mounted中​

因为网络请求下来的数据 常常会存在data容器中

 

 

created:

因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势

mounted:

因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI​ ​

 

你用销毁钩子做过什么?

常常去把一些运行着的代码停下来本地或者网络请求来记录用户的配置信息或者偏好设置

 

       beforeCreate(){

                // vm创建之前运行 无法访问vm的数据源和方法

                // this.change()===>无效

                // berforeCreate()函数作用====>进行网络请求

                // 网络请求的数据怎样使用？

                // 数据预加载，但是无法操作页面

            },

             create(){

                // 对数据源和方法进行了劫持，但是还是无法操作页面

                // 可以做网络请求并且可以操作数据源 但是无法操作页面

             },

             beforeMount(){

                // data等vm对象的工具构建完毕 正在挂载到DOM中

                // 页面渲染出来之前

             },

             mounted(){

                // 已经挂载上去了，页面已经渲染出来，可以操作页面

                // 这里也可以做网络请求,页面加载了之后的所有业务,都可以在这里

                //这个函数执行标志着 vm和dom成功关联==>随意操作vm来间接的操作dom

             },

             beforeDestroy(){

                // 销毁实例之前

                //常常去把一些运行着的代码停下来

                //本地或者网络请求来记录用户的配置信息或者偏好设置

             },

             destroyed(){

                //钩子调用后 才销毁  做最后的挽救

                //从技术的角度来说  可以在这个方法打开其他程序,然后销毁这个程序

             },

             beforeUpdate(){

                // 刷新页面之前，数据已经更新了

             },

             updated(){

                // 更新的是data,这时候还没有刷新UI,它会找一个合适的时机去刷新UI

                // 刷新 页面

             }

 

总结：

 

页面第一次加载运行了那些钩子？

  beforeCreate()  create() beforeMoun() mounted()

那些函数中可以做网络请求？

  beforeCreate()  create()  mounted() beforeDestroy()

那些函数中可以刷新页面？（可以设置数据源）

  create() beforeMoun() mounted()  beforeDestroy()

 beforeUpdate()==>这个不能设置数据源，因为函数是在数据更新过后调用的，如果修改数据源就会再次调用函数。

 

 beforeUpdate() Update()====>都不能在里面修改数据

 

 

 

 

面试题：

什么时生命周期函数？

Vue组件对象在创建和销毁过程中，在某一中条件下成立的时刻，

系统会去调用的Vue中设定的函数 这些函数都叫做：生命周期函数

Vue的生命周期函数有哪些？

普遍的答法：有8个创建前后，挂在前后，更新前后，销毁前后

标准答法：组件有8个（创建前后，挂在前后，更新前后，销毁前后），

路由组件有3个，全局有2个，独享有1个，动态组件有2个，等等

 

为什莫设计生命周期函数？

答：更好的设计程序，让代码更有逻辑

页面首次加载过程中，会依次触发那些钩子？

答：  beforeCreate()  create() beforeMoun() mounted()

this.$el是什莫？他在哪些钩子里面才能访问？

答：他代表了当前组件的真实DOM，要在mounted之后才有

Vue实例的data属性，在那些钩子中能访问？

答：create() beforeCreate() mounted() berforeUpdate() updated() beforeDestroy()

 

为什莫不要在更新钩子中做页面请求？

答：会导致死循环 react有一个shoudComponentUpdate可以自己控制 但是Vue没有

你用beforCreate做过什么业务？

答：这个钩子中可以做网络请求，但是vm没有构建完毕，此时数据方法等等的劫持还没有完成，不能操作this，

因此可以做预加载。

 

vm和dom之间的关系？

答：1.vm是js模拟出来的跟dom结构很像的一种对象结构VNode。它通过底层的render函数

渲染到页面上，让页面DOM跟虚拟VNode关联映射。

2.如果VM的数据源发生变化，会让内存中生成新的NVode 新的NVode会和旧的VNode作比较然后更新，

这个过程就是DIFF算法