3.Vue3.0-ref

Vue3.0-ref

<template>
  <div>{{name}}</div>
  <div>{{gender}}</div>
  <button @click="change()">点击数据更改</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name:'App',
  setup(){
      //复杂类型使用reactive
      //简单数据类型使用ref，在获取值和修改值时候使用.value
      //在模板中使用可以省略.value
      //ref既可以声明简单数据类型也可以声明复杂数据类型
      //当明确知道需要的是一个响应式对象就使用reactive，当不能确定是否是一个响应式对象使用ref
      const name = ref('张三丰')
      const gender = ref("男")
      const change=()=>{
          name.value = "张无忌"
      }
      return {name,gender,change}
  }
}
</script>

<style>

</style>