vue3知识点：toRef函数和toRefs函数

文章目录

• ​​二、常用 Composition API​​

• ​​10.toRef函数​​

• ​​案例：区分toRef与toRefs​​
• ​​项目代码​​

• ​​本人其他相关文章链接​​

二、常用 Composition API

问题：啥叫“组合式API”？

答案：请看官方文档: ​​ https://v3.cn.vuejs.org/guide/composition-api-introduction.html​​

10.toRef函数

注意点1：

toRef(person, ‘name’)最后获取的值也是等同于上一行的person.name的值，但是它做了中间环节，先转换为RefImpl引用对象，再去获取值，这样就是响应式的，而直接调用person.name获取的就是值，不是响应式。

注意点2：

问题：案例代码中有两种写法都可以实现功能，也不报错，但是写法2有个致命的问题在哪？

写法1，使用toRef

写法2，使用ref

答案：写法2的致命问题在，初始化的时候确实读取person里的name属性值张三，但是页面用户点击按钮修改name属性值时，修改的不是person的值，而是修改ref(person.name)这个新弄出来对象的name属性值。详情错误结果展示请看图

总结：

ref(person.name)只是读取name属性值，打包成一个新的ref，页面点击按钮后修改的是如图1中绿色框ref(person.name)返回的对象的name属性值在变，而原person里的name压根没变。

而toRef(person.job.j1, ‘salary’)返回的RefImpl对象有value属性值，它偷偷通过get方法指向原person的name属性值，如图2

如图1

如图2

注意点3：

toRef只能处理对象中一个属性，而toRefs是把这个对象的所有属性创建成多个ref对象。

但是，它只作用第一层参数，打印toRefs对象如图1，使用toRefs的时候页面salary那里会报错无效果，原代码如图4，因为toRefs只把pserson对象属性的第一层进行创建多个ref对象填充到return代码块中，而salary属于person里的job里的嵌套属性，所以代码模板里得进行适当修改才能生效，如图5。这样使用toRefs的好处是，大多数属性直接模板调用即可，比如{{name}}，而个别属性比如salary再写成{{job.j1.salary}}。

另外：return代码块中想使用toRefs不能写成如图2那样，要写成如图3那样；

如图1

如图2

如图3

如图4

如图5

案例：区分toRef与toRefs

项目代码

项目目录

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo"/>
</template>

<script>
  import {ref} from 'vue'
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components:{Demo},
    setup() {
      let isShowDemo = ref(true)
      return {isShowDemo}
    }
  }
</script>

Demo.vue

<template>
  <h4>{{person}}</h4>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
  import {ref,reactive,toRef,toRefs} from 'vue'
  export default {
    name: 'Demo',
    setup(){
      //数据
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })

      // const name1 = person.name
      // console.log('%%%',name1)

      // const name2 = toRef(person,'name')
      // console.log('####',name2)

      const x = toRefs(person)
      console.log('******',x)

      //返回一个对象（常用）
      return {
        person,
        // name:toRef(person,'name'),
        // age:toRef(person,'age'),
        // salary:toRef(person.job.j1,'salary'),
        ...toRefs(person)
      }
    }
  }
</script>

结果展示

本人其他相关文章链接

1.​​《vue3第二章》常用组合式 Composition API，包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性​​ 2.vue3知识点：setup
3.vue3知识点：ref函数
4.vue3知识点：reactive函数
5.vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
6.vue3知识点：reactive对比ref
7.vue3知识点：计算属性与监视属性
8.vue3知识点：生命周期
9.vue3知识点：自定义hook函数
10.vue3知识点：toRef函数和toRefs函数