标签：boy const name reactive vue3 ref 函数

vue3 ref 和 reactive 函数

前言

上一篇博文介绍 setup 函数的时候，最后出现一个问题，就是在 setup 函数中，编写一个事件，直接去修改定义的变量，发现页面上没有更新成功，并且控制台报错，那这篇博客就是讲解遇到的这个问题应该如何处理。

ref 函数介绍

• ref 作用就是将基础数据转换为响应式数据，把数据包装成响应式的引用数据类型的数据。
• 通过对参数返回值的 value 属性获取响应式的值，并且修改的时候也需要对 value 进行修改。
• 在 vue2 当中，通过给元素添加 ref='xxx' ，然后使用 refs.xxx 的方式来获取元素，vue3 也可以。
• 当 ref 里面的值发生变化的时候，视图会自动更新数据。
• ref 可以操作基本数据类型和复杂数据类型，建议使用 ref 操作只对基本数据类型进行操作。

ref 函数使用

使用 ref 函数很简单，首先要在页面引用，然后就可以直接使用了，具体怎么使用呢，下面为了方便介绍，简单来几个案例。

ref 函数处理基本数据类型

首先提一个需求：页面有一个名称需要显示，有一个按钮，点击按钮的时候修改页面展示的这个名字。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名：{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'  // 引入 ref
  export default {
    setup() {
      const name = '
 
 
标签：boy,const,name,reactive,vue3,ref,函数	

来源： https://www.cnblogs.com/wjw1014/p/16441180.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。