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、rend