vue基本知识：methods，computed，watch，生命周期

最新推荐文章于 2024-05-06 17:16:03 发布
最新推荐文章于 2024-05-06 17:16:03 发布
阅读量1.4k 收藏 5
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76357103/article/details/130554621
版权

第二单元 methods，computed，watch，生命周期

二、本单元教学目标

（Ⅰ）重点知识目标

1. methods 写法注意事项
2. computed用法
3. methods，computed 区别
4. watch 和 computed 区别
5. 生命周期函数

二、本单元知识详讲

2.1 Methods选项

使用场景：

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性，在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数

2.2.1 基本用法

语法结构：

<!-- 1. 声明方法 -->
<script>
     createApp({
        data: {
          return {}
        },
        methods: {
            // 下面两种格式都能实现功能
            方法一名:function(){
                //逻辑代码
            },
            方法二(){
                //逻辑代码
            },
        },
    }).mount('#app')
</script>
​
<!-- 2. 调用方法 -->
<!-- 2.1 在vue实例中用this调用 -->
<script>
   createApp({
        data: {
          return {}
        },
        methods: {
            // 下面两种格式都能实现功能
            方法一名:function(){
                //逻辑代码
            },
            方法二(){
                //逻辑代码
            },
        },
    }).mount('#app')
</script>
<!-- 2.2 在标签中调用 -->
 <标签 @click="方法一()"></标签>

特点：

  • 为什么加s，因为可以定义多个方法

  • methods选项的值：对象，对象中定义方法

  • methods选项表示：当前Vue实例可以用到的方法

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="js/vue3.js"></script>
  <style>
    #app{
        width: 600px;
        margin: 30px auto;
    }
  </style>
</head>
<body>
    <div id="app">
    <button @click="showInfo(2)">单击1</button>
    <button @click="showInfo2">单击2</button>
    <span>{{msg}}</span>
</div>
    <script>
     Vue.createApp({
        data: {
          return {
           msg: '初始值',
          }
        },
        methods: {
         // 下面两种格式都能实现功能
            showInfo:function(){
              this.msg = '点击1更改的内容'
            },
            showInfo2(){
              this.msg = '点击2更改的内容'
            },
          },
        }).mount('#app')
    </script>
</body>
</html>

运行效果，如图：

2.2.2 注意事项

下面我们了解下定义Methods中的方法时，需要注意的有哪些：

  1. 在html中写入需要传递的值：

    <button @click="showInfo(2)">单击1</button>

    在方法里面接收：

    methods: {
    showInfo:function(num){
        console.log('这是我接收到的数字：',num)
        this.msg = '点击1更改的内容'
    }
}

    控制台输出:

    这是我接收到的数字：2

  2. methods里的方法第二个参数$event:它传递的是关于鼠标的一些属性和方法

  3. methods里面的方法不能使用箭头函数

    代码演示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="js/vue3.js"></script>
  <style>
    #app{
        width: 600px;
        margin: 30px auto;
    }
  </style>
</head>
<body>
    <div id="app">
    <button @click="showInfo">单击1</button>
    <button @click="showInfo2">单击2</button>
</div>
    <script>
         Vue.createApp({
            data: {
             return {
             msg: '初始值',
           }
            },
      methods: {
        showInfo:function(){
          console.log('this->',this)
        },
        showInfo2:()=>{
          console.log('箭头函数种得this->',this)
        },
      },
        }).mount('#app')
    </script>
</body>
</html>

    打开控制台，运行效果，如图：

    结论：

    如上述做法，在methods里定义的函数showInfo2(),如果用箭头函数的写法，this指向的将会是windows,并且windows根本访问不到data,属性中返回的数据undefined，所以不可在methods选项中使用箭头函数

2.2 计算属性

Vue中的computed属性称为计算属性。

使用场景：

我们学习Vue的模板相关的知识的时候，知道在模板内可以使用表达式，这种表达式非常的便利，但这种便利是有一定的限制的，它们实际上是只适合用于一些简单的运算。也就是说，如果在模板中放入太多的逻辑会让模板过重而且难以维护，例如：

<div id="app"> <h1>{{ message.split('').reverse().join('') }}</h1> </div>

在这个示例中，模板不再简单和清晰。看到这段代码才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理，所以这就是我们使用计算属性的原因

语法结构：

<!-- 调用方式 -->
<div id="app">
    <h1>{{ reverseString }}</h1> 
</div>
<!-- 构建方式 -->
<script type="text/javascript">
    Vue.createApp({
      data: {
        return {}
      },
      methods: {},
      //computed  属性 定义 和 data 已经 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString(){
        
        }
      }
    }).mount('#app')
  </script>

  1. reverseString这个是我们自己定义的名字

  2. computed 属性 定义 和 data 已经 methods平级

  3. 调用方式 {{ reverseString }} 。错误示范：{{ reverseString（） }}

特点：

  • 使用计算属性可以让模板更加的简洁

  • 计算属性是基于它们的响应式依赖进行缓存的（与method方法的区别会详细讲解）

  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

代码演示：

实现字符串反转

<body>
  <div id="app">
    <h1>{{ reverseString }}</h1> 
</div>
  </div>
</body>
<script type="text/javascript">
  Vue.createApp({
    data: {
      return {
         message: 'Nihao',
         num: 100
      }
    },
    computed: {
      reverseString(){
       return this.message.split('').reverse().join('');
      }
    }
  });
</script>

效果图：

2.2.1 计算属性中的set和get方法

特点：

  • get:函数中的值被调用时启用该方法

  • set:绑定的数据被修改后会启用

  1. get方法

    一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，例如：

     <body>
    <div id="app">
    <div class="hello">
      <div id="example">
        <!-- 
          1. 渲染fullName时会调用 fullName的get方法，
          2. 控制台输出：调用了getter属性
        -->
        <p>fullName值: {{fullName}}</p>
      </div>
    </div>
 </div>
</body>
<script>
  Vue.createApp({
    data () {
      return {
        firstName: 'Foo'
      }
    },
    computed: {
      // 注意格式，需要深刻理解
      fullName: {
        get() {
          console.log('调用了getter属性')
          return '***' + this.firstName + '***'
        }
      }
    }
  }).mount('#app')
</script>
​

    说明：

    1. 渲染fullName时会调用 fullName的get方法
2. 控制台输出：调用了getter属性
3. 实际上就是我们通常使用的这种方法：
	computed: {
     reverseString: function(){
         console.log('computed')
         var total = 0;
         return total;
   	 }

    运行效果：

  2. set方法

    <body>
    <div id="app">
    <div class="hello">
      <!-- 
        点击后，调用fullName的set方法
       -->
      <button @click="ClickCeshi">点击改变fullName的值</button>
    </div>
 </div>
</body>
<script>
  Vue.createApp({
    data () {
      return {
        firstName: 'Foo'
      }
    },
    methods: {
      ClickCeshi () {
        this.fullName = 'fullName的新值'
      }
    },
    computed: {
      // 注意格式，需要深刻理解
      fullName: {
        get () {
          console.log('调用了getter属性')
          return '***' + this.firstName + '***'
        },
        set (newValue) {
          console.log('调用了settter属性')
          console.log(newValue)
          this.firstName = newValue
        }
      }
    }
  }).mount('#app');
</script>

    说明：点击后fullName的值改变，计算属性调用fullName的set方法，更新fullName的值

    运行结果，如图：

计算属性具有依赖性，只有当依赖的值发生改变，才会重新计算

同等条件下，计算属性优于 方法 以及 js表达式。

案例：模糊搜索

```vue
<div id="app">
    <input type="text" v-model="keyword" />
    <ul>
        <li v-for="value in searchList">
            <p>{{value}}</p>
        </li>
    </ul>
</div>
<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                keyword: '',
                list: ['百度', '百度翻译', '百度地图', '百度网盘', '百度新闻', '新浪', '新闻', '新加坡']
            }
        },
        computed: {  //设置计算属性
            searchList() {
                if (this.keyword) {
                    return this.list.filter((value) => {  //过滤数组元素
                        return value.includes(this.keyword); //如果包含字符返回true
                    });
                }
            }
        }
    }).mount('#app')
</script>

2.3 couputed 与 methods 的区别

  • methods 和 computed 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

<body>
    <div id="app">
        <p>{{ name }}</p>
        <!-- 每次渲染走到这里都是函数执行，即使这次渲染的数据跟我这个函数无关 -->
        <p>{{ reversedMsg() }}</p>
    </div>
</body>
<script>
    const { createApp } = window.Vue
    const app = createApp({
        data() {
            return {
                msg: 'Hello',
                name: 'shanshan'
            }
        },
        methods: {
            reversedMsg: function () {
                console.log('方法执行啦');
                return this.msg.split('').reverse().join('');
            }
        }
    })
    app.mount('#app')
</script>
​
vm.name = 'duyi';
// 看控制台 reversedMsg执行了2次

  • 如果是计算属性，当给数据name重新赋值时，计算属性并不会执行。

computed 区别于 methods 的核心

在官方文档中，强调了computed 区别于 methods 最重要的两点:

  1. computed 是属性调用{{computedTest}}，而 methods 是函数调用{{methodTest()}}

    • 方法是每次触发重新渲染，调用方法将总会再次执行函数。

  2. computed 带有缓存功能，而 methods 没有

    • 计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要它依赖的data数据不改变，每次访问计算属性，都会立刻返回缓存的结果，而不是再次执行函数。

    • 那么，为什么需要缓存呢？（好处）——节省性能开销

  • 对于任何复杂逻辑，都应当使用计算属性

  • computed 依赖于 data 中的数据，只有在它的相关依赖数据发生改变时才会重新求值

  • computed如果要传参数 就需要在内部返回一个函数（利用闭包）

  • 计算属性和方法重名时 方法权重高

怎么给计算属性 传参数？ 利用闭包

2.4 watch监听器

使用场景：数据变化时执行异步或开销比较大的操作。

2.4.1 定义：

  • 侦听属性，响应数据（data&computed）的变化

  • 是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

  • 当监听的key数据变化时，会立刻执行对应的value

  • watch 中的属性 一定是data 中 已经存在的数据

  • 一般用于异步或者开销较大的操作

  • 注意：也不可以使用箭头函数，同methods

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

2.4.2 语法类型：

函数、对象、字符串、数组

watch: {
  key: value
}

当监听的key数据变化时，会立刻执行对应的value

2.4.3 函数类型

  • 1、通过事件改变值

<body>
    <div id="app">
        <!-- 通过事件改变值 -->
        <select @change="changeBrithday" v-model="year">
            <option v-for="item in years" :value='item'>{{item}}</option>
        </select>
        <div>小明生日是{{year}},今年{{brithDay}}岁</div>
    </div>
</body>
<script>
    const { createApp } = Vue
    const app = createApp({
        data() {
            return {
                years: [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000],
                year: 1995,
                brithDay: new Date().getFullYear() - 1995,
            }
        },
        methods: {
            changeBrithday() {
                this.brithDay = new Date().getFullYear() - this.year
            }
        }
    })
    app.mount('#app')
</script>

  • 2、通过watch配合 v-model 因为v-moel会动态改变data

<body>
    <div id="app">
        <select v-model="year">
            <option v-for="item in years" :value='item'>{{item}}</option>
        </select>
        <div>小明生日是{{year}},今年{{brithDay}}岁</div>
    </div>
</body>
<script>
    const { createApp } = Vue
    const app = createApp({
        data() {
            return {
                years: [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000],
                year: 1995,
                brithDay: new Date().getFullYear() - 1995,
            }
        },
        watch: {
            //侦听器函数，接收两个参数，第一个为newVal(被改变的数据)，第二个为oldVal(赋值新值之前的值)。
            year(newVal,oldVal){
                console.log(newVal,oldVal);
                this.brithDay=new Date().getFullYear()-this.year
            }
        },
    })
    app.mount('#app')
</script>

2.4.4 对象类型

  • 写成对象类型时，为的是提供一些选项。

handler

  • handler选项 ，一个函数， 被侦听的数据改变时执行的回调函数。必需。

  • 其实就是上面写成函数形式的原型

  • handler的值类型为函数/字符串，写成字符串时为一个方法的名字。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: {
            handler () {
                console.log('msg的值改变啦');
            }
        }
    }
})
vm.msg = 'hello'; // 此时回调函数会执行，控制台中打印出 ` msg的值改变啦 `

deep

  • deep选项，布尔值。针对对象数据的侦听。

  • 在默认情况下：

    • 侦听器侦听的数据是一个对象的话，只侦听这个对象引用的变化，只有在给对象重新赋值一个引用时它才能被监听到。

    • 这个对象数据内部的成员、内部对象成员里的成员，都是监听不到的。

  • 所以需要使用deep选项：

    • 让其可以发现对象内部所有值的变化。

    • 默认是false，将deep的值设置为true，那么无论该对象被嵌套的有多深，都会被侦听到。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            personObj: {
                name: '小明',
                age: 88
            }
        }
    },
    watch: {
        personObj: {
            handler () {
                console.log('对象的值改变啦');
            },
            deep: true   // 开启深度侦听
        }
    }
})
vm.obj.name = '明明很爱你'; // 此时回调函数会执行，控制台中打印出 ` 对象的值改变啦 `

  • 注意，当对象的属性较多的时候，性能开销会比较大，因此没有必要给每一个深度属性都侦听，此时可以设置只监听对象的某个属性，这个可以用字符串类型的key解决。

immediate立即执行

  • immediate选项，布尔值。

  • 当页面第一次渲染时，数据只是添加侦听回调，并没有开启侦听。所以第一次渲染的时候侦听函数不会执行，只有后面数据变化才执行。

  • 加上immediate选项后，回调将会在侦听开始之后立刻被调用。第一次渲染的时候就触发，而不是等待侦听的数据更改后才会调用。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: {
            handler () {
                console.log('回调函数执行啦');
            },
            immediate: true
        }
    }
})
// 此时未更改msg的值，就会在控制台打印出来` 回调函数执行啦 `

flush回调的触发时机

当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

export default {
  // ...
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

2.4.5 字符串类型（了解）

  • 其实就是把watch里面的方法抽离出来放到methods里

  • watch里的值为方法methods中的名字，被侦听的数据改变时，会执行该方法。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: 'msgChange'
    },
    methods: {
        msgChange () {
            console.log('msg的值改变啦');
        }
    }
})
vm.msg = 'hello'; // 此时msgChange函数会执行，控制台中打印出 ` msg的值改变啦 `

2.4.6 数组类型（了解）

  • 可以将函数类型、字符串类型、对象类型等多种不同值类型写在一个数组中。如：

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: [
            'msgChange', //字符串：函数名 
            function () {}, //函数
            {//对象
                handler () {},
                deep: true,
                immediate: true
            }
        ]
    }
})

2.4.7 字符串类型key值

  • 当key值类型为字符串时，可以实现监听对象数据当中的某一个深层属性，如：

  • 就不用开启深度侦听了

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            personObj: { name: '小明', age: 88 }
        }
    },
    watch: {
        'personObj.name' () {
            console.log('对象的值改变啦');
        }
    }
})
vm.obj.name = '明明很爱你'; // 此时回调函数会执行，控制台中打印出 ` 对象的值改变啦 `

2.4.8 停止侦听器(了解)

用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。因此，在大多数场景下，你无需关心怎么停止它。

在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数：

js

const unwatch = this.$watch('foo', callback)
​
// ...当该侦听器不再需要时
unwatch()

2.4.9 watch 是异步的

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: 'hello，你好呀，我是杉杉',
        }
    },
    watch: {
        msg () {
          console.log('msg的值改变啦~');
        }
    },
    methods: {
        fn() {
           console.log(1);
           this.msg = 'hahaha';
           console.log(2);
        }
    }
})
​
vm.fn(); // 1  2  msg的值改变啦

  • 怎么让 console.log(2); 最后执行：利用 $nextTick

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: 'hello，你好呀，我是杉杉',
        }
    },
    watch: {
        msg () {
            console.log('msg的值改变啦~');
        }
    },
    methods: {
        fn() {
            console.log(1);
            this.msg = 'hahaha';
            this.$nextTick(() => {//dom更新完成后才执行，$nextTick也是一个异步
                console.log(2);
            },0)
        }
    }
})
​
vm.fn(); // 1  msg的值改变啦  2

2.5 watch 与 computed的区别

  1. 两者都可以观察和响应Vue实例上的数据的变动。功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化

    1. 计算属性擅长处理的场景是：多个数据影响一个数据

    2. watch擅长处理的场景是：一个数据执行，一个函数影响多个数据。

  2. 计算属性有缓存机制，侦听器没有缓存机制

  3. 侦听器支持异步操作，计算属性不支持异步操作（即使写了异步会先return再执行异步）

  4. 计算属性可以给vue新增属性，侦听器必须是data中已有属性

  5. 计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次调用才会执行

  6. 侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次

// computed形式
const { createApp } = Vue
const app = createApp({
    data() {
        return {
            firstName: 'su',
            lastName: 'mei'
          },
    }
    computed: {
        fullName () {
            return this.firstName + this.lastName;
        }
    }
})
​
// watch形式
const { createApp } = Vue
const app = createApp({
    data() {
        return {
            firstName: 'su',
            lastName: 'mei',
            fullName: 'sumei'
        }
    },
    watch: {//是不是麻烦一些
        firtName () {
            this.fullName = this.firstName + this.lastName; 
        },
        lastName () {
            this.fullName = this.firstName + this.lastName;
        }
    }
})

watch 只能监听data中的数据变化吗？

watch可以监听路由中的数据的变化

案例：图书购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .app .table,
        .app .totalPrice {
            width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
    </style>
</head>
​
<body>
    <div id="app">
        <div v-if="books.length">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>书本价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books" :key='index'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <!-- <td>{{getFinallPrice(item.price)}}</td> -->
                        <td>{{item.price}}</td>
                        <td>
                            <button type="button" class="btn btn-default" @click="decrement(index)"
                                :disabled="item.count <=1">-</button>
                            <label>{{item.count}}</label>
                            <button type="button" class="btn btn-default" @click="increment(index)">+</button>
                        </td>
                        <td><button type="button" class="btn btn-warning" @click="removeClick(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <h2 class="totalPrice">总价格：{{totalPrice}}</h2>
        </div>
        <h2 class="totalPrice" v-else>购物车为空！</h2>
    </div>
    <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
    <script>
        const { createApp } = Vue
        const app = createApp({
            data() {
                return {
                    books: [
                        { id: 1001, name: '计算机操作原理', date: '2020-02-12', price: 108, count: 1 },
                        { id: 1002, name: 'JavaScript高级程序设计', date: '2020-02-12', price: 99, count: 1 },
                        { id: 1003, name: '计算机网络', date: '2020-02-12', price: 28, count: 1 },
                        { id: 1004, name: '数据结构', date: '2020-02-12', price: 46, count: 1 },
                        { id: 1005, name: 'C语言', date: '2020-02-12', price: 48, count: 1 }
                    ]
                }
            },
            methods: {
                // 普通方法处理价格
                getFinallPrice(price) {
                    return '￥' + price.toFixed(2)
                },
                increment(index) {
                    this.books[index].count++
                },
                decrement(index) {
                    this.books[index].count--
                },
                removeClick(index) {
                    this.books.splice(index, 1)
                },
            },
            computed: {
                totalPrice() {
                    let totalPrice = 0
                    // 方式一：普通for
                    // 方式二：for (let item of ...)
                    /* for (let item of this.books) {
                        totalPrice += item.price * item.count
                    } */
                    // 方式三：高阶函数reduce：汇总数组内的元素
                    this.books.reduce(function (preValue, book) {
                        totalPrice += book.price * book.count
                    }, 0)
                    return totalPrice
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

2.6 Vue 的生命周期

学习：常见的8个生命周期钩子函数

vue2生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

Vue生命周期的主要阶段：4个before， 4个ed，创建，装载，更新，销毁

  • 挂载（初始化相关属性）

    • beforeCreate ---- 备孕

      注意点：在此时不能获取data中的数据，也就是说 this.msg 得到的是

    • created ---- 怀上了

    • beforeMount ---- 怀胎十月

    • mounted【页面加载完毕的时候就是此时】 ---- 生下来了

      注意点：默认情况下，在组件的生命周期中只会触发一次

  • 更新（元素或组件的变更操作）

    • beforeUpdate

    • updated

      注意点：可以重复触发的

  • 销毁（销毁相关属性）

    • beforeDestroy --- game over前

    • destroyed --- game over

销毁（手动）使用 this.$destroy()

关于8个生命周期涉及到的方法，可以参考Vue官网API：

vue3生命周期

选项式API中将 beforeDestroy 以及 destroyed 修改为 beforeUnmount 和 unmounted，其余一致

生命周期钩子 | Vue.js

如果是vue2的生命周期钩子函数

完整案例： 16_lifeCycle_vue2.html 官方解释

<!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>13_vue2的v-if与v-for优先级</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    data: {
      count: 10
    },
    methods: {
      add () {
        this.count++
        if (this.count === 15) {
          this.$destroy()
        }
      }
    },
    beforeCreate () {
      console.log('beforeCreate')
    },
    created () {
      // 有的人在此处请求数据，修改状态 ---- 不太建议 （请求数据-教育 - 胎教）
      console.log('created')
    },
    beforeMount () {
      console.log('beforeMount')
    },
    mounted () {
      // 在此处请求数据 - （请求数据-教育 - 早教）
      // DOM操作 （揍）
      // 实例化 new Swiper('.container', {})
      // 计时器，延时器等 （年龄从生下来才开始计算）
      // 订阅
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      // DOM操作 
      // 实例化
      // 不要请求数据 - 死循环
      console.log('updated')
    },
    beforeDestroy () {
      // 消除定时器，延时器，取消订阅
      console.log('beforeDestroy')
    },
    destroyed () {
      console.log('destroyed')
    }
  }).$mount('#app')
  
</script>
</html>

15_lifeCycle_vue3.html

<!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>17_vue3生命周期</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="lib/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data () {
      return {
        count: 10
      }
    },
    methods: {
      add () {
        this.count++
        if (this.count === 15) {
          app.unmount()
        }
      }
    },
    beforeCreate () {
      console.log('beforeCreate')
    },
    created () {
      // 有的人在此处请求数据，修改状态 ---- 不太建议 （请求数据-教育 - 胎教）
      console.log('created')
    },
    beforeMount () {
      console.log('beforeMount')
    },
    mounted () {
      // 在此处请求数据 - （请求数据-教育 - 早教）
      // DOM操作 （揍）
      // 实例化 new Swiper('.container', {})
      // 计时器，延时器等 （年龄从生下来才开始计算）
      // 订阅
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      // DOM操作 
      // 实例化
      // 不要请求数据 - 死循环
      console.log('updated')
    },
    beforeUnmount () {
      // 消除定时器，延时器，取消订阅
      console.log('beforeUnmount')
    },
    unmounted () {
      console.log('unmounted')
    }
  })
  
  app.mount('#app')
</script>
</html>
m78星云第一深情
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue computed的执行问题
weixin_34270865的博客
09-10 4467
1.在new Vue（）的时候，vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a con...
vue2：计算属性computed
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
05-28 2555
vue2，计算属性
2024年前端最全vue中methods、watch、computed之间的差别对比以及适用场景，阿里技术专家
最新发布
2401_84123213的博客
05-06 287
watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed。：methods里面定义的函数，需要主动调用的。firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法。watch为一个对象，键是需要观察的表达式，值是对应回调函数（也可以是方法名，或者包含选项的对象）。2、computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,
VUE框架通过手写VUE框架解析vm对象的methods使用方法的原理------VUE框架
春风若有怜花意，可否许我再少年
11-25 983
VUE框架通过手写VUE框架解析vm对象的methods使用方法的原理------VUE框架
vue生命周期学习（watch跟computed）
qq_45217544的博客
07-16 999
1、watch钩子函数监听数据的变化 watch 的一个特点是，最初绑定的时候是不会执行的（firstName的值在data定义时赋予的值），要等到 firstName 改变时才执行监听计算。 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el:
生命周期， created，mounted, methods , computed , watched, 通俗易懂
gabby____的博客
12-11 1021
生命周期： beforecreate : 一般使用场景是在加 loading事件 的时候 created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载） beforemount：处于组件创建完成，但未开始执行操作 mounted ：处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ） bef...
Vue的属性、方法、生命周期实例代码详解
10-16
接下来，我们讨论Vue的生命周期： Vue实例从创建到销毁的整个过程称为生命周期，其中包括多个“钩子函数”或“生命周期钩子”，它们允许我们在特定时刻插入自定义逻辑。以下是一些重要的生命周期钩子： 1. `...
详解Vue 实例中的生命周期钩子
08-31
在 Vue 实例中，我们可以使用选项对象来传递一些基本配置，例如数据、模板、挂载元素、方法、生命周期钩子等选项。其中，数据(data)是 Vue 实例的核心部分，它保存了 Vue 实例中的业务处理逻辑和数据模型等。 在 ...
Vue组件生命周期运行原理解析
01-21
Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前...
vue生命周期各阶段详情分析
01-20
vue生命周期 beforeCreate 实例初始化 this指向实例 不能访问 data computed watch methods上的方法和数据 created 实例创建完成可以访问 data computed watch methods的方法和数据 未挂载到DOM,不能访问到el属性和...
vue-tutorial：一些vue-tutorial-《 Vue学习笔记》
02-06
在创建Vue实例时，我们可以传递一个选项对象，包含data、methods、computed、watch等属性，这些属性定义了应用的数据、方法、计算属性和侦听器。Vue实例的生命周期包括创建、编译、挂载、更新和销毁等阶段，每个阶段...
前端Vue----生命周期(methods、mounted)
04-27 7723
1.什么是生命周期 首先，我们了解一下"生命周期"这个词。 通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。 在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可
Vue中methods与computed区别
Eyno的博客
04-05 1387
核心区别 computed是属性访问，method是函数调用 computed带有缓存功能，method没有 实例： <script> Vue.createApp({ data() { return { message: '我是消息，' } }, methods: { m
vue 中 method、attribute、event的区别（以elemntui为例）
只想买把蝴蝶knife
04-01 1382
作为一个后端选手，在阅读element ui文档时总是对附录的感到疑惑，可能是我对前端不太熟，总觉得一个组件怎么也有method、attribute 并且event 又是什么，其实可以将vue中的组件都看成一个对象，官方术语应该是叫dom元素，下面介绍以el-input元素为例进行三种属于的介绍: attriobute:这个很简单，也就是在标签中可以直接定义的一个东西 上面是input 的attribute，比如可以使用以下属性对 ...
Vue实例详解与生命周期
爬虫 的博客
06-16 4253
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 Vue实例初始化的选项配置对象详解 前面
Vue中的data和computed是在生命周期的执行顺序的探究
PC_136的博客
12-15 5691
先讲述我遇到的情况，我在computed引入了vuex的一个变量getName，由于在页面上多地方共用，因此我在data处将他赋值给timer,发现打印出来是undefine 废话不多，先咔的撸出代码先 在页面引入 然后在页面敲出来 出现这种情况初步猜测是data和computed初始化顺序的问题了，猜测在vue生命周期中data初始化是在computed初始化之前，所以获取不到 co...
VUE的created()生命周期方法和watch监听的使用
qq_43664324的博客
05-12 3203
在使用过程中，两个路由地址用到了同一个页面，需要根据某条件判断是哪个路由过来的，做出不同的处理。 例如如下页面： 添加讲师的路由在左侧显示了出来，但是修改讲师是隐藏的路由。 添加讲师和修改讲师用到了同一个页面，但是由不同的路由地址进行跳转，修改需要回显讲师数据信息，所以需要加以判断。 在设置路由时，可以在修改的路由上做如下设置： { path: 'updateTeacher/:id', name: '修改讲师', component: () => i
在vue中methods互相调用的方法
热门推荐
sinat_39417731的博客
11-07 2万+
this.$options.methods.delAllOrderList.bind(this)();
vue起步之二methods
qq_35723619的博客
11-03 430
给html加入方法/函数 我们需要在new Vue 实例化对象中添加methods方法：methods:用于存储各种方法。 greet方法名随意取，time是参数。通过this.name，获取实例化对象内部的属性name 通过h3调用greet方法 运行结果： https://blog.csdn.net/qq_35723619/article/details/83692449...
vue3 生命周期函数
05-01
Vue3生命周期函数是指在Vue3实例创建、更新、渲染和销毁这几个重要阶段执行的函数。Vue3中生命周期函数分为两类：组件生命周期函数和全局生命周期函数。 首先是组件生命周期函数，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等方法。 beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，此时 data 和 methods 都还未被初始化。 created：组件实例已经完全创建，包括属性计算、watch/event 事件回调。在这里可以访问到已经存在的 DOM 元素，但是该组件的 DOM 元素尚未被渲染出来。 beforeMount：在挂载开始之前被调用，在此之前 template/render 函数已经完成编译。 mounted：组件挂载到 DOM 上后调用，此时真实的 DOM 元素已经生成，可以对 DOM 进行操作。 beforeUpdate：在数据更新之前被调用，此时可以进行修改数据操作。在此函数执行时组件 DOM 所依赖的 props 和 computed 已经更新，但是尚未开始重新渲染 DOM。 updated：数据更新时调用，此时组件 DOM 已经重新渲染过，可以对 DOM 进行操作。 beforeUnmount：在卸载组件之前调用，此时组件实例仍然可以访问。 unmounted：组件卸载完成后调用，在这里执行一些清理工作，比如清除定时器、解除事件监听等。 接下来是全局生命周期函数，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated和errorCaptured等方法。 errorCaptured：可以在组件的内部所抛出的异常被捕获和处理后，再将这个异常最终传递给全局错误处理。在捕获到错误时，可以对错误进行处理，并使用 nextTick 在渲染更新后再将错误信息抛出。 总之，Vue3的生命周期函数提供了方便的钩子函数来执行组件和全局的自定义逻辑，允许开发人员在关键的阶段进行处理来实现更加复杂的业务逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值