Vue3 ref函数

最新推荐文章于 2024-09-17 11:32:38 发布

木子李BLOG

最新推荐文章于 2024-09-17 11:32:38 发布

阅读量204

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/sinat_29304113/article/details/122046211

版权

作用

定义一个响应式的数据。

语法

const xx = ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
JS中操作数据：xxx.value
模板中读取数据：不需要.value，直接<div>{{xxxx}}</div>

备注

接收的数据可以是：基本类型，也可以是对象类型
基本类型的数据：响应式依然是Object.defineProperty()的get与set完成的。
对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数。

reactive函数

作用：定义一个对象类型的响应式函数（基本类型不要用它，要用ref函数）
语法：const 代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象）
reactive定义的响应式数据是“深层次的”
10.内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <div>{{ name }}的信息</div>
  <div>{{ age }}</div>
  <div>{{ job.type }}</div>
  <div>{{ job.salary }}</div>
  <div>{{ number }}</div>
  <button @click="changeInfo">改变信息</button>
</template>
<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("李四");
    let age = ref(20);
    /* let job = ref({
      type: "前端工程师",
      salary: "30k",
    }); */
    let job = reactive({
      type: "前端工程师",
      salary: "30k",
    });
    function changeInfo() {
      // console.log(age); //RefImpl引用实现的实例对象
      name.value = "张三";
      age.value = 18;
      //job.value.type = "全栈工程师";
      console.log(job.type);
    }
    return {
      name,
      age,
      job,
      changeInfo,
    };
  },
};
</script>