zoukankan      html  css  js  c++  java
  • vue的生命周期

      diff 算法两种解释:

        diff 算法,通过虚拟 dom 进行对比,谁变了更新谁,传统方法中,我们改一个部分,dom 就要重新渲染

        diff 算法,原先 dom 树中,有一处数据发生改变,整个 dom 树都会重新渲染,diff 算法,在虚拟 dom 中,原有的进行对比,谁变了,就渲染谁,没变的 dom 节点就不渲染了

      虚拟的 dom 存在文档碎片里面

      生命周期:从无到有,再到无的一个过程,Vue 的生命周期是对组件来说的

      钩子:一环套一环的函数,叫做钩子函数,就是执行完一个函数后会继续执行下一个函数

      分四个阶段,八个过程

      四个阶段为:create 创建  mount 挂载  update 更新  destory 销毁

      八个过程:

        beforeCreate():在实例初始化之前,数据没有加载,页面没有显示 。(往往在这个阶段做 loading 请求状态)

        created():实例初始化之后,请求到了数据,事件,属性等,但是没有加载,页面没有显示。(这个阶段往往发送 ajax 请求,http 请求等等)

        created() ----> beforeMount() 之间的这个阶段,是 vue 的挂载方式,Vue 会在 options 中查找有没有 el 选项,有就把他作为模板,没有就通过 Vue.$mount() 去挂载  

            这种方式也可以实现实例的挂载    通常使用 el 来进行组件的挂载

          有就渲染了模板,没有就渲染了 el 的东西

          然后在判断这个实例里面有没有 template ,有就渲染 模板里面的东西,没有就渲染 el 里面的东西

        beforeMount():就是 Vue 会将模板加到,实例的 $el 中去,但是页面还没挂载出去,页面没有显示

        mounted():页面加载出来

        beforeUpdate():数据更新前

        updated:更新完了,在渲染,谁改变了,渲染谁,而不是将整个 dom 树重新渲染

        beforeDestory():销毁之前

        destoryed():销毁后

          销毁 destory 实例销毁需要人为触发

          销毁:之前渲染好的保持不变,保留下来,后面在使用这个实例,就不起作用了,vm.$destroy()

            当我们使用了 vm.$destroy() 这个方法,我们的页面内容就会固定到那里,我们的方法,data 等等属性,全部会失效

      在虚拟 dom 中使用了 diff 算法,在内存中实现,mounted() 之前,生命周期就不管了,如果想看属性的变化,可以使用 watch (属性监听)这个方法来监听属性

       实例里面套组件,嵌套组件,生命周期执行的顺序

        

      以上面案例的生命周期为例:

        vm.beforeCreate() --> vm.created() --> vm.beforeMount() --> son.beforeCreate --> son.created() --> son.beforeMount() --> son.mounted() --> vm.mounted()

      如果出现数据改不了,数据问题跟生命周期的执行顺序有关

      更改父组件的数据

        vm.beforeUpdate() --> updated()

      组件中的 props 和 ref 属性

      props 属性的用途:是组件标签上的所有属性构成的集合,用于父组件和子组件之间通信的一个桥梁(也就是说,父组件的数据要通过 props 的属性来传递给子组件)

      

      我们来实现一个动态的传递

      

      

      props 构成的集合,存放是的属性名

      在 props 中的属性,在模板中也可以用插值运算来直接使用

      第一步:在组件的标签上添加对应的属性

        第二步:给当前组件手动填写 props 这个对象的属性

      第三步:在当前组件为 this.$props 调用(在上面的案例中查看)

      在 : 动态传递,不带 : 静态传递

      props 是 子组件获取父组件的数据

      ref:则是父组件想去获取子组件的东西

      

      

      ref:父组件获取了子组件的所有信息

        1. 给子组件添加 ref 属性赋值,如 <son ref = 'a' ></son>

        2. 在父组件可以使用 this.$refs 来获取子组件的数据,返回的是一个对象,属性名是一个对象,属性值是子组件

      更改组件内的数据,修改子组件的数据

      vm.beforeCreate() --> vm.created() --> vm.beforeMount() --> son.beforeCreate() --> son.created() --> son.beforeMount() --> son.mounted() --> vm.mounted() --> son.beforeUpdate() --> son.update() 

      --> this.nextTick() 

      组件更新数据,只会调用自己的 beforeUpdate() 和 updated() 不会影响到其他组件的更新;

      所以会导致一个问题:如果说父组件获取子组件中的标签中的内容(这个内容会被组件子组件修改),父组件获取的都是修改前的内容,因为子组件的更新,不会在触发父组件的 mounted

      所以有的时候,我们需要对 html 结构进行重新渲染,所以我们需要另一个函数 this.$nextTick 来进行操作

      组件中,包括子组件所有的钩子都执行完毕之后,才触发  this.$nextTick

      

  • 相关阅读:
    交换变量方法总结
    Java Object Model(一)
    Git命令文本手册
    移动端浏览器touch事件的研究总结
    jQuery中的end()方法
    AngularJs开发——控制器间的通信
    网站收藏
    HTTP Content-type 对照表
    ViewData和ViewBag的那些事
    jQuery选择器
  • 原文地址:https://www.cnblogs.com/shangjun6/p/11245186.html
Copyright © 2011-2022 走看看