vue3 生命周期函数 引入篇

1 文章简介

本文是我在学习vue3生命周期时的一些学习笔记，用于复习巩固和知识积累。文章内容和举例一步步推进！可以放心选择！

2 生命周期主要内容

2.1 引出生命周期

2.1.1 例子引入

首先，我们先通过一个例子来引入生命周期的概念。

例子：实现文本透明度的高低交替过渡变化

效果如图：

透明度的值1不能变 变化的东西交给vue

<h2 :style="{opacity:opacity}">abc<h2>

// 这个写法是错误的

// 需要注意的是，动态绑定样式得用冒号，引号里面的得写成对象（用{}包裹）

{opacity:opacity}前一个是css数据的属性，第二个是数据的名字。他俩重名，可以写成{opacity}。

2.1.1.1 不推荐的实现方法（定时器在vue外面）

不推荐的实现方法（循环定时器在new vue外面 使用箭头函数 ）
（这里的数字设定决定动画过渡效果的舒服与否）

代码如下：

<script>
Vue.config.productionTip = flase //阻止vue在启动时生成生产提示
new Vue({
   
   
    el:'#root',
    data:{
   
   
    opacity:1;
}
})
// 通过外在定时器实现
setInterval(() => {
   
   
    opacity -= 0.01 
},16)
</script>

但此时的代码并不能实现效果，因为我们触碰不到opacity，所以第一次修改（修改变量接收触碰 和 定时器对象变化范围限制）后的代码如下：

<script>
Vue.config.productionTip = flase //阻止vue在启动时生成生产提示

// 只能令一个vm等于vue
const vm = new Vue({
   
   
    el:'#root',
    data:{
   
   
    opacity:1;
}
})
// 通过外在定时器实现
setInterval(() => {
   
   
    // 然后实现触碰vue中的vm的透明度
    vm.opacity -= 0.01 
    // vm.opacity不能一直减小 必须要有限制
    if(vm.opacity <= 0)
       vm.opacity = 1
},16)
<script>

此时我们会发现，这样编写程序不是很好。

• 首先是代码逻辑的不足

红色框里的部分是vue实例，绿色框是具体逻辑。最主要的是这个逻辑还在操作vue实例里面的数据

从功能上来看，二者是扭在一起的，但是从代码逻辑来看，二者是分开的。我们追求的是，当你把vue示例折叠起来时，所有你用到的数据、方法等等就都带走了，不至于说往外面甩逻辑。

注意：这里也不并不是说有了new vue之后外面就不能写东西了，并不是这样。只是说最好把逻辑能够写在vue示例里面。

• 其次是vm使用的不足

这里创建的vm，其实收到它的意义并不大。

要对vue实例进行一些处理，尽可能在内部就消化了。如果想对vue进行全局的操作，那就使用Vue.。在真正开发时很少用到vm接收，避免麻烦和内存占用。

因此，我们对代码进行第二次修改，主要将定时器想办法写在vue实例里面。

2.1.1.2 推荐使用的实现方式（定时器在vue里面）

推荐使用的实现方式（循环定时器在vue里面 用普通函数包裹箭头函数）

new Vue({
   
   
    el:'#root',
    data:{
   
   
    opacity:1;
},
methods:{
   
   
    change(){
   
   
      setInterval(() => {