vue3.0 ref函数案例

最新推荐文章于 2024-10-30 08:35:47 发布

原创最新推荐文章于 2024-10-30 08:35:47 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了Vue3.0中的ref函数，用于创建响应式数据的引用对象。ref函数的基本语法是`const xxx = ref(initvalue)`，在JavaScript中通过`.value`来操作数据，在模板中直接使用`{{xxx}}`读取。ref函数可以接受基本类型和对象类型的数据，对于对象类型，内部会利用reactive函数实现响应式。并提供了App.vue代码示例来展示ref函数的使用效果。

ref函数

作用:定义一个响应式的数据。
语法: const xxx = ref(initvalue)
创建一个包含响应式数据的引用对象(reference对象)。。JS中操作数据:xxx.value
模板中读取数据:不需要.value，直接:
{{xxx}}

·备注:

接收的数据可以是:基本类型、也可以是对象类型。
基本类型的数据:响应式依然是靠object.defineProperty()的get 与set完成的。
对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。

App.vue代码：

<template>
  <h1>一个人的信息1</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h3>工作种类:{{job.type}}</h3>
  <h3>工作薪水:{{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    //方法
    function changeInfo(){
      // name.value = '李四'
      // age.value = 11
      console.log(job.value)
    }

    //返回一个对象（常用）
    return{
      name,
      age,
      changeInfo
    }
  }
}

  
</script>

效果：