vue3 通过ref 进行数据响应

通过用 ref  定义基本类型的数据  你想哪个数据是响应式，就要把哪个数据包一下： 

首先要导入 ：import {ref} from 'vue'   ,然后通过name.value  获取值进行数据响应改变

// 导入
import {ref} from 'vue'

  let name = ref('张三')
  let age = ref(18)
  let tel = '13888888888'
  let address = ref('北京昌平区宏福苑·宏福科技园')

  // 方法
  function changeName() {
    name.value = 'zhang-san' //注意：这样修改name，页面是没有变化的
    console.log(name.value) //name确实改了，但name不是响应式的
  }
  function changeAge() {
    age.value += 1 //注意：这样修改age，页面是没有变化的
    console.log(age.value) //age确实改了，但age不是响应式的
  }

通过 reactive 修改对象类型数据,必须使用 reactive  包起来 =>在vue 中 Proxy(Object) 就是响应数据

<h1>我的一个品牌 { {car.brand }}价格是：{ {car.price}}</h1>

<button @click="changePrice">修改这个品牌和价格</button>

<h2>游戏列表</h2>

<ul>

<li v-for="v in games" :key="v.id"> { { v.id +"=>"+ v.name}} </li>

</ul>

<button @click="changeGames">修改第一个游戏的名字</button>

<h3>显示对象的数据：{ { obj.a.b.c.d }}</h3>

<h3>显示对象的数字：{ { obj.a.b.d.e }}</h3>

<button @click="editChangeNum">修改对象里面的数字</button>

<script lang="ts" setup name = "Person">

import {reactive} from 'vue'

let car = reactive({brand:'奔驰',price:599})

console.log(car)

console.log(car.brand)

function changePrice(){

//car.brand = "宝马"

car.price += 10

}

let games = reactive([

{id:"001",name:"王者荣耀"},

{id:"002",name:"开卷有益"},

{id:"003",name:"王者归来"},

])

function changeGames(){

games[0].name = "修改第一个游戏的名字"

}

let obj = reactive({

a:{

b:{

c:{

d:"hello"

},

d:{

e:99

}

}

}

})

function editChangeNum(){

obj.a.b.d.e = 69998

}

</script>