重温：vue3之ref(vue3函数)

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于vue3专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

 

目录

以点击事件button改变用户信息为例：

错误示范：直接通过修改变量试图修改页面的数据：

原因 ：

纠正：

 代码：

---

以点击事件button改变用户信息为例：

错误示范：直接通过修改变量试图修改页面的数据：

            <template>
                <h1>用户信息</h1>
                <h2>姓名：{{name}}</h2>
                <h2>年龄：{{age}}</h2>
                <button @click="changeinfo">修改人的信息</button>
            </template>

            <script>
                ·首相引入一个ref函数
                import {ref} from 'vue'

                export default{
                    name:'App',
                    setup(){
                        //数据，在给数据赋值变量的时候要使用ref函数来进行，如下：
                        let name = ref('张三');
                        let age = ref(18)
                        
                        //方法
                        function changeinfo(){
                            name = '李四'
                            age = 20
                            console.log(name,age)
                        
                        //返回一个对象（常用）
                        return{
                            name,
                            age,
                            changeinfo
                        }
                        }
                    }
                }
            </script>

 当我们用直接修改变量的当时去尝试修改页面中的数据时，发现页面的数据并没有变化：

但是，我们打开后台发现，点击后后台的数据更新了，但是页面并没有跟着后台一起更新！

原因 ：

我们先可以把直接修改数据的代码注释掉，先给他打印一下要从页面显示的属性到底在什么位置：

      function changeinfo(){
        // name = '李四' 
        // age = 20
        console.log(name,age)
      }

修改完代码以后，刷新页面后，点击时出现一下的东西：

 我们可以清除的看见，我们想要改动的数据都写在RefImpl中的value中： 

所以，我们可以发现我们第一步直接修改复制的数据实质上是vue3没有识别出来。

纠正：

我们现需要在直接修改的数据变量值后面加上.value（如下）：

      function changeinfo(){
        name.value = '李四' 
        age.value = 20
        console.log(name,age)
      }

这时，我们再次保存并刷新页面，点击后发现，数据有改变了：

 如果，我们在setup中有一个函数集合来赋值变量（如下）：

      let job = ref({
        type:'前端工程师',
        salary:'30k'
      })

这时我们点击按钮时，想改便里面的数据时，以下写法可以实现：

        job.value.type = 'UI工程师'
        job.value.salary = '60k'

 代码：

<template>
  <h1>用户信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>工作薪水：{{job.salary}}</h2>
  <button @click="changeinfo">修改人的信息</button>
</template>

<script>

  import {ref} from 'vue'
  export default {
    name: 'App',
    setup(){
      // 数据
      let name = ref('张三');
      let age = ref(18);
      let job = ref({
        type:'前端工程师',
        salary:'30k'
      })

      // // 方法
      function changeinfo(){
        name.value = '李四' 
        age.value = 20
        job.value.type = 'UI工程师'
        job.value.salary = '60k'
        // console.log(name,age)
      }
      // 返回一个对象（常用）
      return{
        name,
        age,
        changeinfo,
        job
      }

      // 返回一个函数（渲染函数）
      // return ()=> h('h1','lqj')
    }
  }
</script>