>[success] # 使用ref 和 reactive 场景 1. `ref `和 `reactive ` 都让数据具有响应式，在场景上来说 * `ref` 定义本地的一些简单数据, 再接收从接口返回的复杂数据都是较好的选择 * `reactive `应用于本地的数据，多个数据之间是有关系/联系(聚合的数据, 组织在一起会有特定的作用) [案例](https://sfc.vuejs.org/#eNp9UlFugzAMvUqUn1GpJdo+Ea3UA+xn3/lhYDoqSCInQCfEYXaCaZ870KQdYyZpod2kBYnE8fOz/ZyB742JuxZ4wlMHjakzBzupGEuLqvMHxoahUqWOVdbAOHqfCM5UXIWQaXOsjPNRVWM0OjYwhHKNkOWu6mCt1aNulYOCjaxE3bA7Sn034eHk8QWUWVtTXMhswbUmWl1MlmtlHZuqYduJORrG1Y3LoD69PnlnSBkNU9mJ5H3fSz6j2VxJRPTb3ZyBlhDs6/3z++ONLXdL4r2piP6GdZ0dILl/8NKE5fXqsroFwp6jbsl0DXGtD9HknItilFG68IVOvOgLhzcv6KUZJJlQLT1IN+FnXDj4jX6pmMfE1zzMadNkJj5aregZeBZ5dljJkwuv5DSsyZb8xTljEyFsmU+P52hjjQdBpxhJ1KqBGGyzeUbdW0AiJo2uOARddoAbBFUAAv7H+Qv6h/fc1MjHHzRJ604=) ~~~html <template> <div> {{info.name}} </div> </template> <script> import { ref,reactive,onMounted } from 'vue' export default { setup() { const info = ref({}) const proxyR = reactive({name:"www"}) onMounted(() => { // 对象 const infoApi = {name:"www",age:12} info.value = infoApi console.log(info) proxyR.name = infoApi.name }) return { info } } } </script> ~~~ ***** 上面说法并不是绝对的[例如](https://sfc.vuejs.org/#eNp9UktOwzAQvYrlDUFKbcEGFBUkDoA4QM0ipJOSKrEtj9MiRdlxBQ7ACYAl4jx8jsHEaZO2SHiR2H5v3ry8TMOvrBWrGnjCpx4qW6YeLpVmbDovVmHDWNMUOjdCpxW0bcBkD07lTgkdMXOF9aGqqKxxnjXMQR47SDNfrCA2+trU2sOctSx3pmJH1Pqo48ND4M8hT+uS6vrOCL620fH2yDKj0bPODbsg5V41atrjPbzEXXR2u0XZ0D4izYvLQZaWlOzz5f3n7ZmNd2O3K1uQZNMlkCi+Xq8Vj9MFJCenIY9+3dwtIfMiRSwWOurK4k3tYKDXNCWI0iwCZQfaM/P19Pr98XjopcTeyUzxE7Kg+KnityOpRGFrvI+EEIG5I04QSWSpj2Zn52Mi+4ZKJGALDaFSlL52ekxL+c75wOs34UWPqRymgMe8H4NJlVqxRKNpyoKK2gCoeLLVVZxmoTsrfu+9xURKzLNuNpcojFtI2glHv6+oQABWkztn1giOhLsoRg1JlytwEwd6Dg7cf5oH1D+6m49qefsLg5wDOg==) ~~~html <template> <div> {{info.name}} </div> </template> <script> import { ref,reactive,onMounted } from 'vue' export default { setup() { const info = reactive({}) const ls = reactive([]) onMounted(() => { // 对象 const infoApi = {name:"www",age:12} Object.assign(info,infoApi) console.log(info) // 数组 const lsApi = ["1","2"] ls.push(...lsApi) ls.concat([78]) console.log(ls) }) return { info } } } </script> ~~~