VUE3-ref 响应式

原创已于 2023-07-14 18:00:18 修改 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #vue3

于 2023-07-12 17:54:42 首次发布

本文介绍了Vue3中ref语法用于创建响应式引用的对象，RefImpl的value属性利用Object.defineProperty实现响应式，当读取或修改属性时触发get和set方法。文中通过示例代码展示了如何在模板和脚本中使用ref来改变和展示数据，并提及了与vue3和Object.defineProperty相关的内容。

VUE3-ref 响应式

重点

ref对’张三’这个数据进行了包裹，引用对象RefImpl
RefImpl对象中有value属性，这个value属性是具有响应式的，并且这个value的底层使用了object.defineProperty完成了响应式
RefImpl对象的value属性，有对应的set和get
当读取RefImpl属性时：get执行
当修改RefImpl属性时：set执行

代码

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="editUserInfo">改变用户信息</button>
</template>
# VUE3-ref 响应式

## 重点

* ref对'张三'这个数据进行了包裹，引用对象RefImpl
* RefImpl对象中有value属性，这个value属性是具有响应式的，并且这个value的底层使用了object.defineProperty完成了响应式
* RefImpl对象的value属性，有对应的set和get
* 当读取RefImpl属性时：get执行
* 当修改RefImpl属性时：set执行

![img](https://i-blog.csdnimg.cn/blog_migrate/042c2614d31f9d50e1ec7e1f1c532114.jpeg)

![img](https://gitee.com/zhang_luwei/image-resources/raw/master/image/1689149649171.jpg)

## 代码

```html
<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="editUserInfo">改变用户信息</button>
</template>

<script>
  import {
    ref
  } from 'vue'
  export default {
    setup() {
      // data
      // ref对'张三'这个数据进行了包裹，引用对象RefImpl
      // RefImpl对象中有value属性，这个value属性是具有响应式的，并且这个value的底层使用了object.defineProperty完成了响应式
      // RefImpl对象的value属性，有对应的set和get
      // 当读取RefImpl属性时：get执行
      // 当修改RefImpl属性时：set执行
      const name = ref('张三')
      const age = ref(20)
      console.log(age);

      function editUserInfo() {
        name.value = '李四'
        age.value = 18
      }
      return {
        name,
        age,
        editUserInfo
      }
    }
  }
</script>

文章涉及内容：
vue3、Object.defineProperty


###  文章涉及内容：
vue3、Object.defineProperty