vue3中ref、reactive、toRef、toRefs的使用

vue3中ref、reactive、toRef、toRefs的使用

四个函数都是用于在setup中创造响应式变量的

ref

ref可用于任何类型的数据创建响应式，取值需要加.value。对于基本数据类型，ref的性能优于reactive，而对于对象类型，ref仍然是通过reactive包装实现的。推荐优先使用ref，方便逻辑拆分和业务解耦。

<div id="app">
  <p>{{ webName }}</p>
</div>

<script>
const app = Vue.createApp({
  setup(props, context) {
    const { ref } = Vue;
    // 需要响应的改变的数据必须使用ref函数
    let webName = ref("xiguapengpeng");
    // 3s后修改数据，页面数据跟着变化
    setTimeout(() => {
      // ref接收参数并有一个value属性
      webName.value = "https://xiguapengpeng.github.io/";
    }, 3000);

    // 暴露变量供视图使用
    return { webName };
  },
});

const vm = app.mount("#app");
</script>

reactive

reactive只用于创建引用类型数据的响应式，取值不需要加.value。

<div id="app">
  <p>{{ objData.webName }}</p>
  <p>{{ objData.webUrl }}</p>
</div>

<script>
const app = Vue.createApp({
  setup(props, context) {
    // 数组或对象使用 reactive 函数
    const { reactive } = Vue;
  
    // 对象数据
    let objData = reactive({
      webName: 'xiguapengpeng',
      webUrl: 'https://xiguapengpeng.github.io/',
    });

    setTimeout(() => {
      objData.webName = '温新';
    }, 3000);

    // 暴露变量供视图使用
    return { objData };
  }
});

const vm = app.mount('#app');
</script>

toRef

将对象中的属性单独变成响应式数据

<div id="app">
  <p>{{ objData1.webName }}</p>
  <p>{{ objData1.webUrl }}</p>
  <p>{{ objData2.webName }}</p>
  <p>{{ objData2.webUrl }}</p>
</div>

<script>
const app = Vue.createApp({
  setup(props, context) {
    const { reactive, toRefs, toRef } = Vue;
    
    // 对象数据
    let objData1 = reactive({ webName: 'xiguapengpeng' });
    let objData2 = { webName: 'fafa' };

    // 若objData中没有webUrl，则赋值为空
    let webUrl1 = toRef(objData1, 'webUrl');
    let webUrl2 = toRef(objData2, 'webUrl');
    setTimeout(() => {
      webUrl1.value = 'https://xiguapengpeng.github.io/';
      webUrl2.value = 'https://xiguapengpeng.gitee.io/';
    }, 3000);

    return { objData1, objData2 };
  }
});

const vm = app.mount('#app');
</script>

toRefs

使解构后的数据重新获得响应式

<div id="app">
  <p>{{ webName }}</p>
  <p>{{ webUrl }}</p>
</div>

<script>
const app = Vue.createApp({
  setup(props, context) {
    // 数组或对象使用 reactive 函数
    const { reactive, toRefs } = Vue;
  
    // 对象数据
    let objData = reactive({
      webName: 'xiguapengpeng',
      webUrl: 'https://xiguapengpeng.github.io/'
    });

    // 数据对象结构
    let { webName, webUrl } = toRefs(objData);

    return { webName, webUrl };
  }
});

const vm = app.mount('#app');
</script>

总结

类型	是否触发页面改变	是否可以解构
ref	✔	❌
reactive	✔	❌
toRef	❌	❌
toRefs	❌	✔