Vue3框架入门学习（二）声明式渲染实现一个页面定时器（理解Vue组件的data方法和mounted方法）

昨天入门Vue3搞了一个HelloWorld玩玩，今天还是准备从官网的例子入手学习，不管什么框架，官网的例子和文档是最先要学习的。

Vue3的组件渲染方式应该有几种，最简单直观的一种组件渲染方式就是声明式渲染，说白了就是用html按照Vue的模板语法定义一个组件模板。

上模板代码

<!--定义一个简单的html模板-->
<div id="counter">
  Counter: {{ counter }}
</div>

定义一个Vue组件

此处最重要的是要搞明白组件里的两个方法data()和mounted()，data方法会被Vue框架在创建组件实例的过程中悄悄调用，data方法返回一个Json键值对对象，该对象会在组件的$data属性里也存一份。而mounted方法是Vue组件生命周期中的一个钩子方法，Vue组件生命周期除了mounted方法外还有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeUnmount、unmounted、errorCaptured、renderTracked、renderTriggered12个钩子方法。从名字上也能看得出来，这些钩子方法涵盖了一个Vue组件从开始创建到销毁的整个过程。

/*定义一个定时器组件*/
const CounterApp = {
  data(){
    return{
      counter: 0
    }
  },
  mounted(){
    setInterval( function(){
      this.counter++;
    }, 1000 );
  }
};
/*调用全局方法createApp创建一个Vue应用，并通过调用mount方法与id为counter的模板绑定*/
Vue.createApp( CounterApp ).mount( "#counter" );

运行一下，竟然报了一个错误，Uncaught TypeError: el.addEventListener is not a function

 

点开报错那一行的源码进去看了看，不是自己页面脚本的问题，然后又去Vue官网文档看了看，发现是多引入了一个vue.esm-browser-3.1.5.js，其实只要引入一个vue.global-3.1.5.js就好了。

去掉vue.esm-browser-3.1.5.js后虽然不报错了，但是页面上的定时器却没有发生变化。于是加上万能断点alert语句调试一下

 

 结果弹出“[object HTMLDivElement]”

没有办法只能使出最狠的一招了，直接查看官网例子的源代码，分析原因主要是有两个，一是应该在组件内给定时器定义一个变量，二是this指针传递有问题，修改一下

 

再运行一下，定时器可以正常工作了。

 

ok，再加个功能按钮，点一下停止定时器。这就涉及到Vue组件里的事件绑定了，查阅Vue官网文档后，得知可以通过v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"，还是蛮简单的，改一下代码

 

再运行调试一下，定时器正常工作，点击“停止定时器”按钮也能停止。搞定收工！

-------------------------简单分割线-------------------------

今天的代码已打包，需要的请自行下载，链接: https://pan.baidu.com/s/1GX1Qt3ocRWBaYxPDUSvlgw 提取码: nyyc

我的个人订阅号（大叔学前端/dashu_fe），感兴趣的可以关注下，谢谢！