重温：vue3之ref(vue3函数)
目录
以点击事件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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号