有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue3的ref、reactive、toRefs特性详解

vue 炮渣日记 3周前 (11-09) 21次浏览 已收录 0个评论 扫描二维码
了解ref()、reactive()这两个特性之前,我们先回顾一下vue2中data和method方法。在vue2中我们定义一个响应式变量name,通过点击事件handle来改变name的值是通过如下方式写的。这样只要name改变则界面相应的会发生改变,这就是数据的双向绑定。

<template>
    {{name}} 
<template>
<script>
  export default {
    data() {
      return {
        name:''
      }
    },
    methods: {
      handle(val) {
        this.name = val
      }
    }
  }
</script>

那么在vue3.0中,我们怎么定义响应式变量呢?我们下面对ref()、reactive()、toRefs()这三个方法进行讲解。

1、ref() 函数

ref() 函数用来根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串、数字、boolean 等,返回值是一个对象,这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
    setup() {
      const name = ref<string>('张三')
      // 在js 中获取ref 中定义的值, 需要通过value属性
     console.log(name.value);
      // 同时定义的响应变量比如return出去,不然界面不会生效,
      // 就像vue2中data里面的值需要return一个道理
      return {
          name
      }
    }
});
</script>

2、reactive() 函数

reactive函数传入的为引用类型,例如数组、对象等,但不能代理基本类型值,返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单,创建出来之后,在setup中return出去,直接在template中调用即可。

<template>
    {{state.name}}
<template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
    setup(props, context) {
      let state = reactive({
        name: 'test'
      });
      return {
        state
      }
    }
});
</script>

3、toRefs() 函数

toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,类似使用拓展用算符…的方法返回数据data,使用方法如下

<template>
   // 加了toRefs使用和reactive()函数区别在于可以直接使用name属性
    {{name}}
<template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
    setup(props, context) {
      let state = reactive({
        name: 'test'
      });
      return {
        // 关键点在这里
        toRefs(state)
      }
    }
});
</script>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址