VUE3-ref 响应式

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