重温: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>
  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淼学派对

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值