2021.11.28 vue 生命周期 （9）

最新推荐文章于 2022-09-21 20:15:29 发布
最新推荐文章于 2022-09-21 20:15:29 发布
阅读量111 收藏
点赞数
文章标签： svg vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54093765/article/details/121591869
版权

生命周期的基本概念

我们一起回顾一下上节课讲到的,过渡的几个钩子函数:

<body>
  <div id='app'>
    <button @click='show=!show'>btn</button>
    <transition :css=false @before-enter='fn1' @enter='fn2' @after-enter='fn3'>
      <h1 v-if='show'>嘿嘿嘿</h1>
    </transition>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        fn1(el) {
          el.style.color = 'red'
        },
        fn2(el, done) {
          const id = setInterval(() => {
            if (el.style.color === 'red') {
              el.style.color = 'green'
            } else {
              el.style.color = 'red'
            }
          }, 1000);
          setTimeout(() => {
            clearInterval(id)
            done()
          }, 3000);
        },
        fn3() {
          alert(666)
        }
      }
    })
  </script>
</body>

以上的3个过渡的钩子函数,就是在我们的动画这个周期内,在每个时间段,我们都可以去设置不同的代码去完成相对应的事,比如在动画开始之前我们需要什么操作,在动画执行过程中我们需要什么操作,动画执行完后我们需要什么操作,都可以写在函数里面去完成

vue的生命周期也是同样的道理,每个 Vue 实例在被创建时都要经过一系列的初始化过程

例如，需要设置数据监听、编译模板、将实例挂载到DOM 并在数据变化时更新DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如created钩子可以用来在一个实例被创建之后执行的代码:

<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: '哈哈哈'
    },
    created: function () {
      console.log(this.msg);
    }
  })
</script>

生命周期的基本概念

请添加图片描述
请添加图片描述

vue的方法和混入/自定义指令

vue的全局方法

Vue.extend( options )

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数.

const Profile = Vue.extend({
  template: '<h1>{{name}}->{{num}}</h1>',
  data() {
    return {
      name: 'kobe',
      num: 8
    }
  }
})

vue的全局方法之nextTick

Vue.nextTick( [callback, context] )

在下次DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

const app = new Vue({
  el: '#app',
  data: {
    msg: '123'
  }
})
console.log(app.msg);
app.msg = 'new msg' //更改数据
console.log(document.getElementById('app').innerText); //dom还没有更新
Vue.nextTick(function () {
  console.log(document.getElementById('app').innerText); //dom已经更新
})

vue的实例方法之nextTick

app.$nextTick( [callback] )

将回调延迟到下次DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待DOM 更新。它跟全局方法Vue.nextTick 一样，不同的是回调的this 自动绑定到调用它的实例上。

const app = new Vue({
  el: '#app',
  data: {
    msg: '你好,世界'
  },
  methods: {
    fn() {
      this.msg = 'hello world'
      console.log(document.getElementById('demo').innerText); //dom还没有更新
      this.$nextTick(function () {
        console.log(document.getElementById('demo').innerText); //dom已经更新
      })
    }
  }
})

vue的实例方法之destroy

vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发beforeDestroy和destroyed的钩子。

vue的混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项( 比如可以单独把数据或是方法什么的单独变成一个混合对象 )。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

<script>
  const app = new Vue({
    el: '#app',
    data: {

    },
    components: {
      cpn1: {
        template: '<div><h1 v-if="show">cpn1</h1><button @click="fn">cpn1</button></div>',
        data() {
          return { show: true }
        },
        methods: {
          fn() {
            this.show = !this.show
          }
        }
      },
      cpn2: {
        template: '<div><h1 v-if="show">cpn2</h1><button @click="fn">cpn2</button></div>',
        data() {
          return { show: true }
        },
        methods: {
          fn() {
            this.show = !this.show
          }
        }
      }
    }
  })
</script>

上面的案例罗级很简单,我们定义了两个组件cpn1和cpn2,用show的布尔值去控制h1标签内容的显示,我们发现cpn1和cpn2这两个组件中的data和methods中的内容时一样的,此时我们可以用mixins将这些相同的内容提取出来再分发到每个组件中.

<script>
  const mixData = {
    data() {
      return { show: true }
    },
    methods: {
      fn() {
        this.show = !this.show
      }
    }
  }
  const app = new Vue({
    el: '#app',
    data: {

    },
    components: {
      cpn1: {
        mixins: [mixData],
        template: '<div><h1 v-if="show">cpn1</h1><button @click="fn">cpn1</button></div>',
      },
      cpn2: {
        mixins: [mixData],
        template: '<div><h1 v-if="show">cpn2</h1><button @click="fn">cpn2</button></div>',
      }
    }
  })
</script>

vue混入的数据选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

<script>
  const mixData = {
    data() {
      return {
        show: true,
        name: 'kobe'
      }
    },
    methods: {
      fn() {
        this.show = !this.show
      }
    }
  }
  const app = new Vue({
    el: '#app',
    data: {

    },
    components: {
      cpn1: {
        mixins: [mixData],
        template: '<div><h1 v-if="show">cpn1{{show}}</h1><button @click="fn">cpn1</button></div>',
        data() {
          return {
            show: 'test',
            num: 8
          }
        },
      },
      cpn2: {
        mixins: [mixData],
        template: '<div><h1 v-if="show">cpn2</h1><button @click="fn">cpn2</button></div>',
      }
    }
  })
</script>

请添加图片描述

vue混入的钩子函数选项合并

同名钩子函数将合并为一个数组( 数组的每一项都是一个函数, 当钩子被触发之后, 数组里面的每个函数都会执行依次的 )，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
请添加图片描述

<script>
  const mixData = {
    data() {
      return {
        show: true,
        name: 'kobe'
      }
    },
    methods: {
      fn() {
        this.show = !this.show
      }
    },
    created() {
      console.log('混入对象的钩子被调用');
    }
  }
  const app = new Vue({
    el: '#app',
    data: {

    },
    components: {
      cpn1: {
        mixins: [mixData],
        template: '<div><h1 v-if="show">cpn1{{show}}</h1><button @click="fn">cpn1</button></div>',
        data() {
          return {
            show: 'test',
            num: 8
          }
        },
        created() {
          console.log('组件钩子被调用');
        }
      }
    }
  })
</script>

相当于:

created: [function () { console.log('混入对象的钩子被调用') }, function () { console.log('组件钩子被调用') }]

vue混入的对象选项合并

值为对象的选项，例如methods、components和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

<script>
  const mixData = {
    data() {
      return {
        msg: '嘿嘿嘿'
      }
    },
    methods: {
      fn() {
        console.log('from mixins');
      },
      fn1() {
        console.log('from mixins1');
      }
    }
  }
  const app = new Vue({
    el: '#app',
    data: {

    },
    components: {
      cpn: {
        mixins: [mixData],
        template: '<div><h1>{{msg}}</h1><button @click="fn">btn</button><button @click="fn1">btn1</button></div>',
        methods: {
          fn() {
            console.log('from cpn');
          }
        }
      }
    }
  })
</script>

vue的全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

Vue.mixin( options )

<body>
  <div id='app'>
    <cpn></cpn>
  </div>

  <div id="vm">
    <cpn></cpn>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    Vue.mixin({
      methods: {
        fn() {
          console.log('我是全局mixins');
        }
      }
    })
    const app = new Vue({
      el: '#app',
      data: {

      },
      components: {
        cpn: {
          template: '<div><button @click="fn">btn_app</button></div>'
        }
      }
    })

    const vm = new Vue({
      el: '#vm',
      data: {

      },
      components: {
        cpn: {
          template: '<div><button @click="fn">btn_vm</button></div>'
        }
      }
    })
  </script>
</body>

使用全局方法设置的混合, 会在之后的每一个Vue实例中进行混合,就如同是直接修改了Object.prototype一样

请谨慎使用全局混入，因为它会影响每个单独创建的Vue 实例 (包括第三方组件)。

新时代农民工官方认证码农--菜鸭子毛毛~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue面试题及其答案推荐
09-16
Vue实例从创建到销毁的过程称为生命周期。了解每个阶段的方法，如`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`，对于理解Vue的工作原理至关重要...
Vue.extend使用基础Vue构造器，创建一个“子类”
u010234868的专栏
09-22 170
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
vue组件中父类给子类传参（props）
王大力的博客
07-04 5406
  自己的随手笔记，主要是自己看的，分享给大家，哪里不对，请大家多多指教,如果有问题请加 QQ(1445579000) 说明来意 1.因为VUE的组件和VUE实例是'子----父 '关系，所以组件想要拿到VUE实例中数据模块里面的数据（子类拿到父类的数据）必须使用PEOPS进行接收数据   1.V绑定：自定义属性名称='父类的参数名称” 2.父类道具：[“自定义属性名称”]，接受子类种传...
Vue.extend构造器
Dear_Mr的博客
05-22 3万+
1.简单介绍Vue.extend(options)参数：对象用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来
Vue子类：Vue.extend
tangtian_yes的博客
03-28 378
Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。 （就是加一些方法元素，方便下次使用时直接出现自己想要的内容）
Vue.js如何获得兄弟元素，子元素，父元素（DOM操作）
热门推荐
qq_15256443的博客
09-10 5万+
&lt;button @click = “clickfun($event)”&gt;点击&lt;/button&gt; methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.i...
2021.6毕业设计-基于SSM与Java的电影网站的设计与实现.zip
最新发布
02-23
标题 "2021.6毕业设计-基于SSM与Java的电影网站的设计与实现" 暗示了这是一个关于使用Spring、SpringMVC（统称为SSM）和Java技术来构建电影网站的项目。这个毕业设计涵盖了后端开发、前端界面设计以及数据库管理等多...
ohra:Vue.js基础知识幻灯片-Ohra-maart 2021
03-26
8. **生命周期钩子**：每个Vue实例都有其特定的生命周期，包括`beforeCreate`、`created`、`beforeMount`、`mounted`等。开发者可以在此处插入代码以在不同阶段执行特定任务。 9. **过渡效果**：Vue内置了与`Vue ...
SSM+Vue中国咖啡文化宣传网站任务书.doc
08-27
4. **后台管理**：管理员可增删改查咖啡种类，实现全生命周期管理。同时，对文章进行编辑、评论和点赞管理。 5. **数据库设计**：使用SQL Server作为数据存储，确保数据的安全性和高效性。 6. **系统设计**：采用SSM...
WA-Zadace:Zadaćeiz kolegija网站Aplikacije 2020.2021。 ak。 上帝
03-28
8. **生命周期钩子**：Vue组件有多个生命周期钩子函数，如`created`、`mounted`、`updated`等，允许在组件的不同阶段执行特定逻辑。 9. **计算属性与侦听器**：计算属性根据其他数据动态计算结果，而侦听器监听数据...
Vue.extend创建vue子类
米 柴的博客
07-31 376
Vue创建子类并且实例化
Vue组件父类和子类之间传值
oracle11770的专栏
05-18 7558
因Vue组件之间值不能共享，所以需要通过内部指定属性进行传递。（PS：驼峰命名，标签引用是要用-隔开）一，父类组件向子类组件传值&lt;body&gt;    &lt;div id="app"&gt;   &lt;user-Parent-Comp&gt;&lt;/user-Parent-Comp&gt;    &lt;/div&gt;  &lt;/body&gt;  &lt;scri
Vue 子类构造器 --- Vue.extend
null
09-26 567
承上启下，主要介绍了Vue.extend 子类构造器 方法及作用
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
vue生命周期、vue请求、动画
凯凯凯凯凯凯凯凯
09-21 826
vue生命周期、vue请求、动画
9. Vue 生命周期
heaven_dad的博客
07-29 119
9. Vue 生命周期 -Vue生命周期主要记住两个方法 created 和 mounted方法 created在页面渲染之前执行 mounted在页面渲染之后执行 debugger相当于打断点 ​ 代码实现 <body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app">
vue3.0生命周期详细解析
weixin_38687522的博客
06-25 1325
一、图示vue2.0到vue3.0改变 beforeCreate => setup() created => setup() beforeMount => onBeforeMount mounted => onMounted beforeUpdate => onBeforeUpdate updated => onUpdated beforeDestroy => onBeforeUnmount destoryed => onUnmounted error
9.vue 生命周期。
weixin_45735755的博客
08-14 111
Vue 生命周期
Vue系列九：生命周期
苍穹尘的博客
05-18 260
vue对象的生命周期 1). 初始化显示 beforeCreate() created() beforeMount() mounted() 2). 更新状态 beforeUpdate() updated() 3). 销毁vue实例: vm.$destory() beforeDestory() destoryed() 常用的生命周期方法 created()/mounted(): 发送ajax...
7.react的生命周期？vue生命周期？
10-18
React和Vue都有自己的生命周期。下面是它们的生命周期方法： React生命周期方法： 1. constructor() 2. static getDerivedStateFromProps() 3. render() 4. componentDidMount() 5. shouldComponentUpdate() 6. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值