readonlyAPI的使用

readonlyAPI的使用

readonly

• 我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另外一个地方（组件使用），但是不能被修改，这个时候就用到readonly
• readonly会返回原生对象的只读代理（也就是它依然是一个proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）

<template>
  <div>{{ info }} <button @click="updateState">点击</button></div>
</template>

<script>
import { ref, readonly } from "vue";
export default {
  setup(props, { attrs, slots, emit }) {
    const info = readonly({ name: "why" });
    const updateState = () => {
        info.name="22"
    };
    return {
      updateState,
      info,
    };
  },
};
</script>