创建vue3.0的第一个组件，学习vue3较vue2的改变

前言

vue3继承了vue2的大部分功能，增添了一些特性，所以vue叫做渐进式框架，所以还是可以用vue2的大部分语法的

vue3组件代码

<template>
  
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <button @click="sayName">按钮</button>
</template>

<script lang="ts">
import {ref,computed} from 'vue' 

export default {
  name: 'App',
  setup(){
    const name = ref('zhangsan')
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = 'I am ' + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>

• 将data（）和methods()函数合成为setup（）
• 定义变量直接用const let ，并需要引入ref，并且这些值都需要.value获取
• 所有模板中需要用到的变量和函数都需要用return返回，这里的计算属性和以前的差不多只是换了种写法

理解ref

ref数据响应式监听，和react-hook好像差不多。ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值