ToRef function usage
First of all, the toRef function has two parameters.
toRef (operation object, object attribute)
Okay, next we use the toRef function to write a case. It is still the same as before. The page displays the name and name of a user. age.
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{boy_toRef}}</p> <p>年龄:{{boy.age}}</p> </div> </template> <script> import { toRef } from 'vue' export default { setup() { const boy = { // 创建一个用户对象 name: '我是????????.', // 用户名称 age: 10 // 用户年龄 } // 使用 toRef 函数包裹,操作 boy 对象的 name 属性 const boy_toRef = toRef(boy, 'name') console.log(boy_toRef) // 我们直接打印看一下包裹后的数据格式 return { boy, boy_toRef } } } </script>
Save the code and refresh the page.
We can see the structure of the data. The value is directly the attribute value of the name under boy. So, next we write a button, click the button, and modify this name value.
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{boy_toRef}}</p> <p>年龄:{{boy.age}}</p> <el-button type="primary" @click="btn">修改 name</el-button> </div> </template> <script> import { toRef } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值 const boy_toRef = toRef(boy, 'name') const btn = () => { boy_toRef.value = '????????.' // 把 name 修改成 ????????. console.log(boy_toRef) // 修改完成打印一下结果 } return { boy, btn, boy_toRef } } } </script>
Save the code and refresh the page, then click the button to see the page effect.
We can find from the screenshots that the value of boy_toRef has indeed been modified, but the page has not changed, and there is no error on the page.
What is the reason for this? In fact, this is not a bug. As I said at the beginning of this blog post, the toRef function will interact with the source data. Modifying the responsive data will cause the source data to be modified, but its modification will not cause the view layer data to be updated. So, This is what the toRef function does. Indeed, we can see from the screenshot above that there is no data update in the view, but what about the modification of the source data? It doesn't matter, before answering this question, we first have to know what source data is.
Just like the above code:
const boy = { name: '我是????????.', age: 10 } const boy_toRef = toRef(boy, 'name')
The toRef function wraps the boy object, so the boy object is the source data.
Therefore, if you want to confirm whether the original data has changed, you need to print the boy object after clicking the button and observe whether it has changed.
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{boy_toRef}}</p> <p>年龄:{{boy.age}}</p> <el-button type="primary" @click="btn">修改 name</el-button> </div> </template> <script> import { toRef } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } const boy_toRef = toRef(boy, 'name') // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值 const btn = () => { boy_toRef.value = '????????.' // 把 name 修改成 ????????. console.log(boy_toRef) // 修改完成打印一下结果 console.log(boy) // 修改完成打印一下boy结果 } return { boy, btn, boy_toRef } } } </script>
Save the code, refresh the page, click the button to modify the name value, and then check the boy object printed on the console.
It is found that the name value of the boy object has been changed from I am ?????????. to ??????? ???., but the page is still not updated.
remember!
The toRef function will interact with the source data. Modifying the responsive data will cause the source data to be modified, but its modification will not cause the view layer data to be updated.
ref function verification
The ref function can turn the attribute values in the object into responsive data. Modifying the responsive data will not affect the source data, but the view The data on the layer will be updated. Is this correct? We didn’t test it in the previous section, so we’ll test it here too.
Let’s still write a case. The page displays a name. Click the button to modify the page name.
<template> <div> <h2 id="ref-nbsp-reactive-nbsp-函数">ref reactive 函数</h2> <p>姓名:{{name_ref}}</p> <el-button type="primary" @click="btn">修改信息</el-button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const name = '我是????????.' const name_ref = ref(name) const btn = () => { name_ref.value = '????????.' console.log(name_ref) // 打印一下被ref包裹的数据 console.log(name) // 打印一下源数据 } return { name_ref, btn } } } </script>
Save the code, refresh the page, click the button to view the results printed by the page console, mainly to see whether the data wrapped by the ref function has been modified successfully, whether the source data has been modified successfully, and whether the final page has Modification, see screenshot below.
OK, through the screenshot above, everyone understands it!
So remember again!
The ref function can change the attribute value in the object into responsive data. Modifying the responsive data will not affect the source data, but the data on the view layer will be updated
toRefs function
The use of toRefs function is actually similar to the toRef function.
The toRefs function is used to set multiple data to corresponding data in batches.
The toRefs function interacts with the original data. Modifying the responsive data will affect the source data, but will not update the view layer.
The toRefs function can also interact with other responsive data, making it easier to process view layer data.
toRefs function uses the old
method to create an object, then wrap it with the toRefs function and display it on the page.
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{boy_toRefs.name}}</p> <p>年龄:{{boy_toRefs.age}}</p> </div> </template> <script> import { toRefs } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } const boy_toRefs = toRefs(boy) // 将 boy 用 toRefs 包裹 console.log(boy_toRefs) // 打印一下结果 return { boy_toRefs } } } </script>
Save the code and refresh the page to view.
So, let’s modify the code. In addition to .property, we also need .value during rendering.
<p>姓名:{{boy_toRefs.name.value}}</p> <p>年龄:{{boy_toRefs.age.value}}</p>
Modify the view layer code and check the effect.
Hey, it’s normal now!
Some people may wonder, isn't this thing getting more and more complicated? Originally, you could just click on the attribute, but now you have to click on the attribute and value. Isn't it unnecessary to take off your pants and put P on it? Hey hey hey! I think so too.
Why is it normal to say that it is unnecessary, because as mentioned in the previous blog post, we can use the reactive function to process this kind of complex structure data. Rendering can be done by clicking once at most, but the toRefs function requires a few clicks. twice.
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{boy_toRefs.name}}</p> <p>年龄:{{boy_toRefs.age}}</p> </div> </template> <script> import { toRefs, reactive } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } const boy_toRefs = reactive(boy) return { boy_toRefs } } } </script>
我们不使用 toRefs 函数,而是用之前说的 reactive 函数处理数据。
我们可以看到,页面是可以正常解析的,那为什么我们还有舍近求远的使用 toRefs 函数呢?
其实是有原因的呀!
其实 toRefs 函数最大的用处在这里!
我们这个 boy 对象里面只有两个参数比较少,如果我们这个对象里面有十个参数或者是更多的话,每次展示的时候都得写那么多遍的 boy 点,是不是很麻烦呢?所以说使用 toRefs 函数就可以解决这个问题,看下面的代码。
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{name}}</p> <p>年龄:{{age}}</p> </div> </template> <script> import { toRefs } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } return { boy_toRefs , ...toRefs(boy)} } } </script>
在 return 抛出 reactive 的时候,使用扩展运算符和 toRefs 函数,就可以实现直接写属性的方式展示数据了。
但是呢,深层次的对象依旧需要通过点来实现。
也许你还有疑问,直接扩展运算 reactive 函数也行啊,为啥要套上 toRefs 函数,记住一点呀!
toRefs 函数修改,原始数据被改变,页面不会被触发。
看下面代码:
<template> <div> <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2> <p>姓名:{{name}}</p> <p>年龄:{{age}}</p> <el-button type="primary" @click="btn">修改 name</el-button> </div> </template> <script> import { toRefs, reactive } from 'vue' export default { setup() { const boy = { name: '我是????????.', age: 10 } const new_toRefs = toRefs(boy) const btn = () => { new_toRefs.name.value = '????????.' console.log(boy) } return { btn, ...toRefs(boy) } } } </script>
打印一下结果:
从打印结果中可以看出,原始数据被改变,页面没有被触发。根据我的写法,可以发现,从解构或构建 toRefs 返回的对象,都不会对值的响应性产生影响。
The above is the detailed content of How to use toRef and toRefs functions in Vue3. For more information, please follow other related articles on the PHP Chinese website!

Vue.js' role in web development is to act as a progressive JavaScript framework that simplifies the development process and improves efficiency. 1) It enables developers to focus on business logic through responsive data binding and component development. 2) The working principle of Vue.js relies on responsive systems and virtual DOM to optimize performance. 3) In actual projects, it is common practice to use Vuex to manage global state and optimize data responsiveness.

Vue.js is a progressive JavaScript framework released by You Yuxi in 2014 to build a user interface. Its core advantages include: 1. Responsive data binding, automatic update view of data changes; 2. Component development, the UI can be split into independent and reusable components.

Netflix uses React as its front-end framework. 1) React's componentized development model and strong ecosystem are the main reasons why Netflix chose it. 2) Through componentization, Netflix splits complex interfaces into manageable chunks such as video players, recommendation lists and user comments. 3) React's virtual DOM and component life cycle optimizes rendering efficiency and user interaction management.

Netflix's choice in front-end technology mainly focuses on three aspects: performance optimization, scalability and user experience. 1. Performance optimization: Netflix chose React as the main framework and developed tools such as SpeedCurve and Boomerang to monitor and optimize the user experience. 2. Scalability: They adopt a micro front-end architecture, splitting applications into independent modules, improving development efficiency and system scalability. 3. User experience: Netflix uses the Material-UI component library to continuously optimize the interface through A/B testing and user feedback to ensure consistency and aesthetics.

Netflixusesacustomframeworkcalled"Gibbon"builtonReact,notReactorVuedirectly.1)TeamExperience:Choosebasedonfamiliarity.2)ProjectComplexity:Vueforsimplerprojects,Reactforcomplexones.3)CustomizationNeeds:Reactoffersmoreflexibility.4)Ecosystema

Netflix mainly considers performance, scalability, development efficiency, ecosystem, technical debt and maintenance costs in framework selection. 1. Performance and scalability: Java and SpringBoot are selected to efficiently process massive data and high concurrent requests. 2. Development efficiency and ecosystem: Use React to improve front-end development efficiency and utilize its rich ecosystem. 3. Technical debt and maintenance costs: Choose Node.js to build microservices to reduce maintenance costs and technical debt.

Netflix mainly uses React as the front-end framework, supplemented by Vue for specific functions. 1) React's componentization and virtual DOM improve the performance and development efficiency of Netflix applications. 2) Vue is used in Netflix's internal tools and small projects, and its flexibility and ease of use are key.

Vue.js is a progressive JavaScript framework suitable for building complex user interfaces. 1) Its core concepts include responsive data, componentization and virtual DOM. 2) In practical applications, it can be demonstrated by building Todo applications and integrating VueRouter. 3) When debugging, it is recommended to use VueDevtools and console.log. 4) Performance optimization can be achieved through v-if/v-show, list rendering optimization, asynchronous loading of components, etc.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Notepad++7.3.1
Easy-to-use and free code editor

WebStorm Mac version
Useful JavaScript development tools

Dreamweaver Mac version
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)