2 Vue 中的mounted()方法用 setInterval

心已赠人 2023-10-06 20:19 20阅读 0赞

#### 用Vue3编写的计数器 ####

*  说明
 *  编写项目基本结构
 *  准备计数器变量
 *  mounted() 中实现自增
 *  Vue生命周期中mounted和created的区别

## 说明 ##

通过编写计数器我们要从面向DOM编程的思想中解放出来，进入面向数据的编程方式。

如果你以前只使用过JQuery，没有使用过Angular和Vue，这可能会颠覆你的认知，但这就是Vue的众多特性之一。

## 编写项目基本结构 ##

新建一个`Demo2.html`文件，这时候你可以把`Demo1.html`内容复制过来，但更建议你手敲一下上节的代码，作为复习。

## 准备计数器变量 ##

基本编码结构准备好后，可以开始写计数器了。计数器能变化，肯定是需要一个变量的，这个变量起名为`counter`。在Vue的`template`(模板)中使用变量，需要用到字面量标识`{ {}}`双大括号，我喜欢把这个双大括号叫做字面量。

Vue.createApp({
        
        template: '<div>{
        {counter}}</div>'
    }).mount("#app")

到目前为止，只是在模板中使用了`counter`变量，但是还没有声明，声明这个变量需要在`data()`函数中，具体代码如下。

data() {
        
        return {
        
            counter: 1
        }
    },

也许你现在还不能完全明白这段代码的意思，这不要紧，前几节你只要跟着敲，得到结果就好。写到这里，你可以双击文件打开，在浏览器中看一下效果。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo2计数器</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        Vue.createApp({
          
            data() {
          
                return {
          
                    counter: 1
                }
            },
            template: '<div>{
          {counter}}</div>'
        }).mount("#app")
    </script>
    
    </html>

这时候页面上应该展示出`1`。再回来看整个代码，他的意思是说，在Vue中声明了一个变量`counter`，并在模板中展示出来。知识点就是如何声明变量和在模板中使用变量。

![在这里插入图片描述][ab2e7b2293b746339414ec3b4a36771d.png]

## mounted() 中实现自增 ##

mounted是一个声明周期钩子函数，你把他想成是页加载渲染完成，自动执行的方法就可以了。

先用`console.log()`，打印出页面加载完成，看看效果：

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
当你明白了这个函数的意义，因为`mounted()`是自动执行，那就可以在里边写一个计时器了。

mounted() {
        
        // console.log('页面加载完成后-自动执行')
        setInterval(() => {
        
            this.counter += 1   //这个this.counter指向的就是data中的counter
            //this.$data.counter +=1   //效果相同
        }, 1000)
    },

写完这段代码，浏览页面，就可以看到计数器的效果了。

![在这里插入图片描述][0d355c0ee2b040258701e9f866bc731e.gif_pic_center]  
现在你回想以前不用框架，原生写法时，是不是要自己编写DOM，而现在完全不用了。

`document.getElementById('app').innerHTML()`

这节就是你要转变的一个观点，从面向DOM编程，改为面向数据编程。

你能感受到这点不同，这就是你本文最大的收获。

如果你真的想学好Vue3，光看和听是没有用的，还是要动手敲，我建议你先把本文的代码敲三边以上。我是一个比较笨的开发者，所以一般学习时，我都会把实例代码多敲几边。这样才能有个初步印象。

如果你完全是一个新手，对本文的代码不能完全理解，也不要慌张。在\[初识\]阶段，我们只要动手，大概了解Vue3的基本特性就可以。在基础语法中，我们还会详细讲解。

最后，为了方便你学习，给出`Demo2.html`的全部代码.

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo2计数器</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        Vue.createApp({
          
            data() {
          
                return {
          counter: 1 }
            },
            mounted() {
          
                console.log('页面加载完成后-自动执行')
                setInterval(() => {
          
                    this.counter += 1
                }, 1000)
            },
            template: '<div>{
          {counter}}</div>'
        }).mount("#app")
    </script>
    
    </html>

## Vue生命周期中mounted和created的区别 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

[ab2e7b2293b746339414ec3b4a36771d.png]: https://img-blog.csdnimg.cn/ab2e7b2293b746339414ec3b4a36771d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/11b6220bd4b643c98dbeb5fe41e82fb4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[0d355c0ee2b040258701e9f866bc731e.gif_pic_center]: https://img-blog.csdnimg.cn/0d355c0ee2b040258701e9f866bc731e.gif#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6b3070c4707e4e51809dc0483d6a7846.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16