使用Ref 为基本数据类型 创建响应式对象。
通过ref函数包裹后的基本数据，实际就是一个RefImpl的实现了
在函数中使用的话，取值需要通过 xxx.value 取到真实的值
模板中无需使用 xxx.value，框架已经帮我们解析过了
<template> <div class="person"> <h1>姓名:{{ name }}</h1> <h1>年龄:{{ age }}</h1> <!--点击事件用@click --> <button @click="changeName">改名</button> <button @click="addAge">加年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <script lang="ts"> export default { name: "Person" // ,setup(){ // } } </script> <!-- setup 语法糖， 替代在export default里的setup函数--> <script lang="ts" setup> import {ref} from 'vue' let name = ref("张三") //RefImpl let age = ref(18)//RefImpl let tel = "1388888888" function changeName() { console.log("changename start" + name.value) //这里数据已经改了，但是不是响应式的 name.value = "zhangsan" console.log("changename after" + name) } function addAge(){ age.value = age.value + 1 } function showTel() { alert(tel) } </script> <style> .person { background-color: aqua; } </style>使用reactive包裹对象(JSON Map) 或者 List
注意坑点：reactive 整体对象是响应式的，但是直接解构它的属性，解构出来的变量就不再是响应式，toRefs 就是解决这个问题的。目前template中使用的是car.price，如果想提取price，就要使用toRefs进行提取
let {name , age } = toRefs( person ) ，页面中就能直接使用name
<template> <div class="person"> <h1>{{ car.brand }}汽车价值{{ car.price }}万</h1> <!--点击事件用@click --> <button @click="changePrice">改价格</button> <ul> <li v-for="element in games" :key="element.gameId">{{ element.gameName }}</li> </ul> <button @click="changeFirst">改第一个名称</button> </div> </template> <script lang="ts"> export default { name: "Person" // ,setup(){ // } } </script> <!-- setup 语法糖， 替代在export default里的setup函数--> <script lang="ts" setup> import {reactive} from 'vue' let car = reactive({brand: "奔驰", price: 100}) let games = reactive([ {gameId: "001", gameName: "流星蝴蝶剑"}, {gameId: "002", gameName: "CS"}, {gameId: "003", gameName: "红警"} ]) function changePrice() { car.price += 1 } function changeFirst() { games[0].gameName = "暴力摩托" } </script> <style> .person { background-color: aqua; } </style>如果Ref引用对象类型，需要 car.value.xxxx，car是RefImpl，需要用.value提取到值
<script lang="ts"> export default { name: "Person" // ,setup(){ // } } </script> <!-- setup 语法糖， 替代在export default里的setup函数--> <script lang="ts" setup> import {reactive,ref} from 'vue' let car = ref({brand: "奔驰", price: 100}) let games = ref([ {gameId: "001", gameName: "流星蝴蝶剑"}, {gameId: "002", gameName: "CS"}, {gameId: "003", gameName: "红警"} ]) function changePrice() { car.value.price += 1 } function changeFirst() { games.value[0].gameName = "暴力摩托" } </script>下面还有
对于整体对象对比 Ref 与 Reactive
注意点 Ref可以引用 基本类型 与 对象类型 上面，但是需要 xxx.value
如果是Reactive替换值，需要Object.assign( car , { xxx 服务端数据})
<template> <div class="person"> <h1>{{ car.brand }}汽车价值{{ car.price }}万</h1> <!--点击事件用@click --> <button @click="changePrice">改价格</button> <button @click="changeCar">改汽车</button> </div> </template> <script lang="ts"> export default { name: "Person" // ,setup(){ // } } </script> <!-- setup 语法糖， 替代在export default里的setup函数--> <script lang="ts" setup> import {reactive,ref} from 'vue' // let car = ref({brand: "奔驰", price: 100}) //这是Ref写法 let car = reactive({brand: "奔驰", price: 100}) function changePrice() { // car.value.price += 1 //这是Ref写法，记得加.value car.price +=1 } function changeCar() { // car.value = {brand: "宝马", price: 120} //这是Ref写法 Object.assign(car,{brand: "宝马", price: 120}) } </script> <style> .person { background-color: aqua; } </style>
