Vue2.0——生命周期函数

3、钩子函数
自定义指令也像组件那样存在钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

所有的钩子函数的参数都有以下：

• el：指令所绑定的元素，可以用来直接操作 DOM

• binding：一个对象，包含以下 property：

  name：指令名，不包括 v- 前缀。

  value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。

  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

  expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。

  arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。

  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

  vnode：Vue 编译生成的虚拟节点

  oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

• 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

4、函数简写

大多数情况下，可能想在bind和update钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写：

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

生命周期函数（钩子函数）

已经学过的钩子函数：window.onload（）=>{ } 满足钩子函数特征：页面一旦加载，系统会自动调用，不许我们自动调用这个函数。

当前vm实例在创建的过程中，会去调用的函数：

directives:{},

    //钩子函数: 生命周期函数  (c语言中有一类系统回调的函数然后执行业务 叫做钩子)
    //在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数 
    
    //当前vm实例在创建到销毁的过程中  会去调用的函数:
    beforeCreate(){
        //1、能否网络请求?
        //能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的

        //2、能否网络请求数据 然后设置到数据源中?
        //不能设置到数据源中,因为这个钩子中 this还在创建

        //3、这个在项目中干什么?
        //只要不是用于页面渲染
        //预加载图片: 网页中同源加载的优化(同一个页面中img script等等 src属性去请求资源)
        new Image().src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54"
        //预加载工具
        //第三方工具的加载

        //这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据
        console.log("beforeCreate",this.msg,this.change1,this)										
    },
    created(){
        //能否网络请求?
        //能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
        //能否网络请求数据 然后设置到数据源中?
        //可以设置到数据源中,因为这个钩子中 this已经创建完毕了
        //这个在项目中干什么?
        //请求首屏数据

        //vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中
        //这个函数可以操作this对象了  但是无法操作DOM
        console.log("created",this.msg,this.change1)					
    },
    beforeMount(){
        //渲染前的操作
        //vm对象已经创建完毕了,在挂载之前触发的钩子
        //这个函数可以操作this对象了  但是无法操作DOM
        console.log("beforeMount")
    },
    mounted(){
        //vm已经挂载到页面了
        //请求首屏数据,请求时页面已经出来了					
        console.log("mounted")
    },
    beforeUpdate(){
        //这两个钩子中 不能网络请求新数据 去更新数据源
        //会导致死循环

        //数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子
        console.log("beforeUpdate",this.url)
    },
    updated(){
        //页面已经重新渲染了触发的钩子
        console.log("updated")
    },

    beforeDestroy(){

        //vm对象销毁之前触发的钩子,this还在  可以做最后的操作
        //保存用户的行为配置文件:播放器的进度 等等
        console.log("beforeDestroy",this.msg)
    },
    destroyed(){
        //后面在webpack环境下操作 无法操作this
        //往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部
        console.log("destroyed",this.msg)
    }	
}

学完要知道的面试题：

1. 什么是生命周期函数？

   vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数

2. vue的生命周期函数有哪些？

   • 普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后；

   • 高级的答法:组件的有8个(创建前后,挂载前后,更新前后,销毁前后)；自定义指令也有5个；动态组件有2个；路由(组件有3个,全局有2个,独享有1个)

3. 为什么要设计生命周期函数？

   • 把整个运行期间的业务区分的很明显
   • 能够更好的帮助我们把产品的业务逻辑实现了
   • 更有利于我们维护产品 和 修改需求
   • 能够让我们写出更高质量的产品的代码

4. 页面首次加载过程中，会依次触发哪些钩子

   beforeCreate，created，beforeMount，mounted

5. this.$el 是什么?它在哪些钩子中才能访问?

   它代表了当前组件的真实DOM,要在mounted之后才有

6. Vue 实例的 data 属性，在哪些钩子中能访问

   created beforeMount mounted beforeUpdate updated beforeDestroy

7. 为什么不要在更新钩子中做页面的数据请求?

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

8. 你用beforeCreate做过什么业务?

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

9. .VM和DOM之间的关系?

   1、VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode. 它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射；

   2、 如果VM的数据源发生变化,会让内存中生成新的VNode 新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法；

10. 讲一讲DIFF算法?

 
什么是DIFF
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

 
DIFF算法的过程
当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过sameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作：
找到对应的真实dom，称为el
如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
如果oldVnode有子节点而VNode没有，则删除el子节点
如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
设置新旧VNode的头尾指针
新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作