>[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> ~~~