记一次ts+uniapp项目数据单项绑定值失败

我想实现的功能是点击某个位置实现定位，将反解析到的地理位置信息回显到页面。
刚开始我是这么写的：定义了一个全局变量 city 和 district，获取数据后将值重新赋值给city和district，但是绑定失败，页面不能回显。
script代码：

var city = '';//城市名
var district = '';//所在区
const getLocationTap = () => {
  // console.log("==============开始获取定位=================");
  //获取经纬度
  uni.getLocation({
    type: 'gcj02', // 坐标系类型
    success: function (res) {
      var latitude = res.latitude; // 维度
      var longitude = res.longitude; // 经度
      // console.log('经度：' + longitude + '，纬度：' + latitude);
      //使用高德api返解析经纬度获取到当前地理位置信息
      http<LocationItem>({
        url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + longitude + ',' + latitude + '&key=13b302c4d7f4be2eb3c7e5b65d5a7e31&radius=1000&extensions=all',
        method: 'GET',
      }).then((result) => {
        const regeocode = result.regeocode;
        //获取市名称
        city = regeocode.addressComponent.city
        //获取区县名称
        district = regeocode.addressComponent.district
        //把当前位置存储到pinia中
        const memberStore = useMemberStore()
      })


    },
    fail: function (res) {
      console.log('获取定位失败：' + res.errMsg);
    }
  });
}

页面代码：

 <text class="address">{{ city }} - {{ district }}text>

回显失败，找了半天才知道全局变量声明需要这样写：

var city = ref();//城市名
var district = ref();//所在区

//后面重新赋值需要写成这样
//获取市名称
city.value = regeocode.addressComponent.city
//获取区县名称
district.value = regeocode.addressComponent.district

原来这是vue3的写法，双向绑定需要使用ref，ref可以绑定普通变量和对象，reactive可以绑定对象，写法用法不一样，详细见vue3官方文档