Vue3 Composition API: 对比ref和reactive

对比refreactive

Vue2回顾

首先回顾一下在Vue2中我们是如何创建一个响应式数据 (reactive data)的:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
//在lang="ts"的环境下,要在vue3中使用vue2的API,需要使用 defineComponent 包裹一下整个对象,来确保this的指向不出问题
import { defineComponent } from 'vue';

export default defineComponent({
  name: "App",
  data() {
    return {
      title: "你好,Vue3!",
    };
  },
  methods: {
    handleClick() {
      this.title = "海贼王来了";
    },
  },
});
</script>

Vue3新特性

ref的使用

而在Vue3中,我们可以用Composition API: ref 来改写上述代码:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const title = ref("你好, Vue3!");
    const handleClick = () => {
      title.value = "海贼王来了";
    };
    return { title, handleClick };
  },
});
</script>

ref 的作用就是将一个原始数据类型(primitive data type)转换成一个带有响应式特性(reactivity)的数据类型,原始数据类型共有7个,分别是:

  • String
  • Number
  • BigInt
  • Boolean
  • Symbol
  • Null
  • Undefined

相比于Vue2,用ref 的好处就是传值时可以不用再写this

那如果我想让一个对象(Object)也具有响应性(reactive) 这一特点呢?

reactive的使用

Vue3提供了一个方法:reactive (等价于Vue2中的Vue.observable() )来赋予对象(Object) 响应式的特性,那么我们可以将上述代码用对象的形式改写为:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ data.title }}</h1>
  <button @click="data.handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      title: "你好, Vue3",
      handleClick: () => {
        data.title = "海贼王来了";
      },
    });
    return { data };
  },
});
</script>

你可能会觉得data.xxx 的写法太麻烦,那么我们可以使用es6新语法扩展运算符来简化一下:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      title: "你好, Vue3",
      handleClick: () => {
        data.title = "海贼王来了";
      },
    });
    return { ...data };
  },
});
</script>

Bug出现

不出意外,你会发现这个简化后的代码竟然无效,不管怎么点按钮,页面并没有发生变化!事实上,这样写没有效果的原因就在于一个响应型对象(reactive object) 一旦被销毁或展开(如上面代码那样),其响应式特性(reactivity)就会丢失。通过类型检查我们可以知道,虽然 data.title 的值确实发生了变化,但data.title的类型只是一个普通的字符串(String) ,并不具有响应式特性(reactivity),故而页面也没有随着其值的变化而重新渲染。

toRefs的作用

为了解决上述问题,Vue3又提供了一个新的API:toRefs,它可以将一个响应型对象(reactive object) 转化为普通对象(plain object),同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。说白了就是放弃该对象(Object)本身的响应式特性(reactivity),转而给对象里的属性赋予响应式特性(reactivity)。故而我们可以将代码修复成下面这样:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      title: "你好, Vue3",
      handleClick: () => {
        data.title = "海贼王来了";
      },
    });
    const dataAsRefs = toRefs(data);
    /*
    Type of dataAsRefs:
    {
        title: Ref<string>,
        handleClick: Ref<() => void>
    }
    */
    return { ...dataAsRefs };
  },
});
</script>   

总结

refreactive 一个针对原始数据类型,而另一个用于对象,这两个API都是为了给JavaScript普通的数据类型赋予响应式特性(reactivity)。根据Vue3官方文档,这两者的主要区别在于每个人写JavaScript时的风格不同,有人喜欢用原始数据类型(primitives),把变量单独拎出来写;而有人喜欢用对象(Object),把变量当作对象里的属性,都写在一个对象里头,比如:

// style 1: separate variables
let x = 0
let y = 0

function updatePosition(e) {
  x = e.pageX
  y = e.pageY
}

// --- compared to ---

// style 2: single object
const pos = {
  x: 0,
  y: 0
}

function updatePosition(e) {
  pos.x = e.pageX
  pos.y = e.pageY
}

(完)

参考资料

[1]:https://vue-composition-api-rfc.netlify.app/#ref-vs-reactive
[2]:https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/
[3]:https://coding.imooc.com/learn/list/449.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。