虽然 ref()接收的数据也可以是对象类型,但最好用来接收基本类型

<template>
  <h1>我是App组件</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'
// ref函数生成的是一个RefImpl引用对象;  RefImpl(reference 引用;  implement 实现 )

export default {
  name: 'App',
  setup() {
    /*
     * ref接收的数据可以是:基本类型,也可以是对象类型  
     * ref函数的作用:定义一个响应式的数据
     *
     * 语法: const xxx = ref(initValue)
     *      ·创建一个包含响应式数据的引用对象(reference对象,简称ref对象
     *      ·JS操作数据:xxx.value
     *      ·模板中读取数据:不需要.value,直接<div>{{xxx}}</div>)
     *
     * RefImpl中:
     *    基本数据类型实现双向绑定,是通过Object.defineProperty()的getter setter完成的
     *    对象类型的数据,内部求助了vue3.0中的一个新函数 --- reative函数;
     *        补充:ref在接收对象类型时,从根儿上来讲,是使用了ES6中的proxy方法,
     *             但是在vue3中,没有直接写这段代码,而是把proxy的操作封装到了reactive函数
     *             中,即,reactive这个函数里面写了具体对proxy的实现
    */
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '前端',
      salary: '30k'
    })

    function changeInfo() {
        name.value = '李四'
        age.value = 48
        console.log(job.value);
        job.value.type = '前端开发大牛'
        job.value.salary = '60k'
    }

    // 返回一个对象(常用)
    return {
      name,
      age,
      job,
      changeInfo
    }
  },
}
</script>

Logo

前往低代码交流专区

更多推荐