Ref and Reactive in VUe3

1. Responsive variable with ref

2. Reactive variables

• Reactive is the way in VUE3 to implement responsive data
• Reactive data in VUe2 is implemented via defineProperty
• Reactive data in VUE3 is implemented by ES6 Proxy
• Parameter to Reactive must be an object (JSON/ARR)

3. Difference between Ref and Reactive

• Question 1: Why does the clickEvent function say age.value while the template function says age?

Reactive (ref(18) -> reactive({value: 18})); reactive({value: 18})); In the case of template, it is because vue automatically recognizes and adds.value

• Question 2: How does vUE automatically recognize?

A: VUE will automatically determine if the data is of ref type before parsing it. If so, it will be added automatically. Otherwise, it will not be added

Both isRef and isReactive are introduced to determine the type

Question 3: What is the difference between REF and Reactive? A: Vue adds. Value automatically if template uses ref type data, otherwise it does not