toRef怎么用，与toRefs的区别

hamimelon2020

已于 2022-03-03 10:13:05 修改

阅读量227

点赞数

分类专栏： vue JavaScript 文章标签： vue.js 前端 javascript

于 2022-03-03 10:07:09 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123246827

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<div id="app">
<p>作者:{{author}}</p>
<p>书名: {{title}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {reactive, toRef} = Vue;
const app = Vue.createApp({
  setup(){
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })
    let { author } = toRef(book.author);
    let { title } = toRef(book.title);
    
    return {
      author,
       title
    }
  }
})
const vm = app.mount('#app')

console.log(vm.title)

</script>
</html>

以上不对。

这样可以。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<div id="app">
<p>作者:{{author}}</p>
<p>书名: {{title}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {reactive, toRef} = Vue;
const app = Vue.createApp({
  setup(){
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })
    let  author  = toRef(book, 'author');
    let  title  = toRef(book, 'title');
    
    return {
      author,
       title
    }
  }
})
const vm = app.mount('#app')

console.log(vm.title)

</script>
</html>

let  author  = toRef(book, 'author');
let  title   = toRef(book, 'title');

const也成。

经测，有响应性了

Java无难事
10:05:32.666 vm.title='Java有难事‘
10:05:32.671 VM84:1 Uncaught SyntaxError: Invalid or unexpected token
10:05:46.662 vm.title="Java有难事"
10:05:46.670 'Java有难事'

Root
setup
author:"孙鑫" (Ref)
title:"Java有难事" (Ref)

toRefs的效果是一样的，就是表达转换形式不同。

Root
setup
author:"孙鑫" (Ref)
title:"Java有难事" (Ref)

let { author, title } = book;
这个这里没有toRefs，但是Vue处显示的效果还是一样的，就是console那里改不了，因为没有响应性。

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
toRef怎么用，与toRefs的区别

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><div id="app"><p>作者:{{author}}</p><p>书名: {{title}}</p></div><script src="https://unpkg.com
复制链接

扫一扫