VUE3 ref reactive区别

admin

2021 年 08 月 12 日

817 次浏览

暂无评论

2002字数

Vue

ref
</div>

ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值

```java
<template>
  
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <button @click="sayName">按钮</button>
</template>

export default {
  name: 'App',
  setup(){
    const name = ref('zhangsan')
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = 'I am ' + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>
```

reactive
</div>

reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了

所以需要用toRefs函数转化为响应式数据对象
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201127154139758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MjEwNQ==,size_16,color_FFFFFF,t_70#pic_center)

将上面用ref写的代码转化成reactive型的代码

```java
<template>
  
  <div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <button @click="sayName">按钮</button>
  </div>
</template>

interface DataProps {
  name: string;
  now: number;
  birthYear: number;
  age: number;
  sayName: () => void;
}

export default {
  name: "App",
  setup() {

const data: DataProps = reactive({
      name: "zhangsan",
      birthYear: 2000,
      now: 2020,
      sayName: () => {
        console.log(1111);
        console.log(data.name);
  
        data.name = "I am " + data.name;
        console.log(data.name);
      },
      age: computed(() => {
        return data.now - data.birthYear;
      }),
    });

const refData = toRefs(data)
    refData.age
    return {
      ...refData,
    };
  },
};
</script>

最后修改：2021 年 08 月 12 日

如果觉得我的文章对你有用，请随意赞赏

VUE3 ref reactive区别

发表评论取消回复

Vulfocus 【YAPI】漏洞复现

Docker部署fastdfs

Linux 后台运行jar包

基于计算机视觉的盲道识别与分割算法研究

Windows 10 2004激活工具

docker-compose搭建zookeeper伪集群

navcat注册机

容器(docker)部署wordpress

Windows 10 2004激活工具

小米路由器4A千兆版刷机

VUE3 ref reactive区别

发表评论 取消回复

VUE3 ref reactive区别

发表评论取消回复