Vue3 Toref

Posted on  by admin
TOREF is used to create a new REF for the property on the source response object, thereby maintaining a response connection to its source object properties.

Receive two parameters: source response objects and attribute names, returns a REF data.For example, when using the Parent component, you want to reference an attribute of the PrOPS and is useful when you respond to a response connection.

TOREFS is used to convert the response object to a result object, where each attribute of the result object is a REF that points to the origin of the original object.

Commonly used in the deconstruction assignment operation of ES6, because the data after the deconstruction of the Deconstruction of a response object is directly deconsive, and the use of Torefs can easily solve this problem.

In fact, it is very similar to Toref, just put it in an object, and the deconstruction is convenient.

The REF we said in the previous part is just a response to a single variable.

const user = reactive({ ...props.apiUser });

Vue3.0 also provides us with an object response of the Reactive function.

小结:ref和toRef的区别(1). ref本质是拷贝,修改响应式数据不会影响原始数据;toRef的本质是引用关系,修改响应式数据会影响原始数据(2). ref数据发生改变,界面会自动更新;toRef当数据发生改变是,界面不会自动更新(3). 以上就是vue3 toRef函数和toRefs函数的基本使用! In my previous post, I implemented my first Vue3 component. I implementend a very simple web app (roll the dice) where I had a “div” where to show the result and a button to trigger the roll and generate a random number from 1 to 6.

In that case, I used “ref()” to create reactive properties.

“My first Vue3 component” article where I used ref() for declaring reactive properties:

For example in “setup()” function of my component I declared “dice” property in order to store the last result of the roll action. The “dice” property was an integer, initialized with 0.

To make it reactive, I used “ref()” function to initialize it.

So “dice” it was not just a simple integer but an object:.

In this way “dice” is a object with “value” attribute.

This means that, if you want to access to the “dice” value in your component, you need to use “dice.value”.

Vue3 in Toref and Torefs