[JavaScript知识库]Vue3 ref

在Vue3.0中创建响应式数据需要使用ref，reactive 这两个方法。

ref一般用来创建基本数据类型的响应式数据；

reactive一般用来创建引用数据类型的响应式数据。

语法

const xxx = ref(initValue) ：创建一个包含响应式数据的引用(reference)对象

作用: 定义一个数据的响应式

使用

在js中操作数据： xxx.value

在模板中操作数据： 直接使用，不需要.value

（是因为Proxy，Proxy进行数据劫持的时候需要接收一个对象，所以ref将基本数据类型的数据包装成应用类型，使其可以进行响应式）

原理

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

实例

<template>
  <div>
    <h1>Home Page</h1>
    <div>
      {{ count }}
      <button @click="add">+</button>
    </div>
  </div>
</template>
<script lang="ts">
// 导入ref函数
import { ref } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return {
      count,
      add
    }
  },
}
</script>

运行结果：

阅读世界，共赴山海

423全民读书节，邀你共读