vue中定义属性和方法，响应式定义

<script setup>
let name="mr.wu";
let age=30;
const handleClick = ()=>{
     name="米斯特务";
     console.log(name);
}
</script>

<template>
 <div>
    <p>
        {{name}} - {{age}}
    </p>
    <button @click="handleClick">click me</button>
 </div>
</template>

<style scoped>

</style>

通过上边的定义可以在页面上显示数据，但是如果想修改name属性的值，并不能实时响应到页面中，那应该怎么样定义属性呢？

需要引入ref，ref是个方法，如下：

import {ref} from "vue";

 通过ref将属性的值包裹起来，这样就是一个可响应式的变量了，如下：

<script setup>
import {ref} from "vue";
let name=ref("mr.wu");
let age=ref(30);
const handleClick = ()=>{    
     console.log(name);
}
</script>

打印name这个属性，你会发现现在name变成了一个对象，如下：

 这个对象中有个value的属性。

咱们在script如果想拿到属性的值需要使用name.value，但是咱们在template中并不需要使用name.value，直接使用name就可以获取到值，在script如何修改值呢，就通过name.value="dfddfdf",这样就可以修改成功。