昨天入门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），感兴趣的可以关注下，谢谢！
?
?