5、readonly

<template>
  <div class="app">
    <div>我的钱： {{ money }}</div>
    <div>{{ car.brand }} ---{{ car.price }}</div>
    <button @click="money++">按钮</button>
    <button @click="car.price = 200">按钮</button>
  </div>
</template>

<script>
// readonly 可以传一个对象，也可以传一个ref的属性，返回这个对象的只读代理，不能被修改
// 一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的。
// 可以防止对象被修改
import { reactive, ref, toRefs, readonly } from 'vue'
export default {
  setup() {
    const money = ref(100)

    const car = readonly({
      brand: 'zs',
      price: 18
    })

    return {
      money: readonly(money),
      car
    }
  }
}
</script>

<style></style>