From b469596b9d2e612178733631f0e759d0446e1854 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Fri, 15 Jan 2021 08:59:52 +0000
Subject: [PATCH 1/3] feat: add unwrap example code to reactive

---
 src/api/basic-reactivity.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md
index 8fed58a1dc..fd66b4e00a 100644
--- a/src/api/basic-reactivity.md
+++ b/src/api/basic-reactivity.md
@@ -18,6 +18,31 @@ The reactive conversion is "deep"—it affects all nested properties. In the [ES
 function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 ```
 
+::: warning
+`reactive` will unwrap all the deep [ref](./refs-api.html#ref), while maintaining the [ref](./refs-api.html#ref) reactivity
+
+```ts
+const count = ref(1)
+const obj = reactive({ count })
+
+// ref will be unwrapped
+obj.count === count.value
+
+// it will update `obj.value`
+count.value++
+
+// same value
+obj.count === count.value
+
+// it will also update `count` ref
+obj.count++
+
+// same value
+obj.count === count.value
+```
+
+:::
+
 ## `readonly`
 
 Takes an object (reactive or plain) or a [ref](./refs-api.html#ref) and returns a readonly proxy to the original. A readonly proxy is deep: any nested property accessed will be readonly as well.

From 8fead98b75bd5bb31654e16d6b55d0b177626d63 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Fri, 15 Jan 2021 09:08:34 +0000
Subject: [PATCH 2/3] chore: add change the warning to a tip and add a warning

---
 src/api/basic-reactivity.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md
index fd66b4e00a..5883d6ced7 100644
--- a/src/api/basic-reactivity.md
+++ b/src/api/basic-reactivity.md
@@ -18,7 +18,7 @@ The reactive conversion is "deep"—it affects all nested properties. In the [ES
 function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 ```
 
-::: warning
+::: tip
 `reactive` will unwrap all the deep [ref](./refs-api.html#ref), while maintaining the [ref](./refs-api.html#ref) reactivity
 
 ```ts
@@ -43,6 +43,23 @@ obj.count === count.value
 
 :::
 
+::: warning
+When assiging a [ref](./refs-api.html#ref) to a `reactive` property, that [ref](./refs-api.html#ref) will be automatically unwrapped.
+
+```ts
+const count = ref(1)
+const obj = reactive({})
+
+obj.count = count
+
+obj.count // 1
+
+// ref will be unwrapped
+obj.count === count.value
+```
+
+:::
+
 ## `readonly`
 
 Takes an object (reactive or plain) or a [ref](./refs-api.html#ref) and returns a readonly proxy to the original. A readonly proxy is deep: any nested property accessed will be readonly as well.

From c26b9dbae48388112e77b2e5f7255e8daa4f067c Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Sat, 16 Jan 2021 07:39:40 +0000
Subject: [PATCH 3/3] Apply suggestions from code review

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/api/basic-reactivity.md | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md
index 5883d6ced7..58240e5bd9 100644
--- a/src/api/basic-reactivity.md
+++ b/src/api/basic-reactivity.md
@@ -18,33 +18,31 @@ The reactive conversion is "deep"—it affects all nested properties. In the [ES
 function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 ```
 
-::: tip
-`reactive` will unwrap all the deep [ref](./refs-api.html#ref), while maintaining the [ref](./refs-api.html#ref) reactivity
+::: tip Note
+`reactive` will unwrap all the deep [refs](./refs-api.html#ref), while maintaining the ref reactivity
 
 ```ts
 const count = ref(1)
 const obj = reactive({ count })
 
 // ref will be unwrapped
-obj.count === count.value
+console.log(obj.count === count.value) // true
 
 // it will update `obj.value`
 count.value++
-
-// same value
-obj.count === count.value
+console.log(count.value) // 2
+console.log(obj.count) // 2
 
 // it will also update `count` ref
 obj.count++
-
-// same value
-obj.count === count.value
+console.log(obj.count) // 3
+console.log(count.value) // 3
 ```
 
 :::
 
-::: warning
-When assiging a [ref](./refs-api.html#ref) to a `reactive` property, that [ref](./refs-api.html#ref) will be automatically unwrapped.
+::: warning Important
+When assigning a [ref](./refs-api.html#ref) to a `reactive` property, that ref will be automatically unwrapped.
 
 ```ts
 const count = ref(1)
@@ -52,10 +50,8 @@ const obj = reactive({})
 
 obj.count = count
 
-obj.count // 1
-
-// ref will be unwrapped
-obj.count === count.value
+console.log(obj.count) // 1
+console.log(obj.count === count.value) // true
 ```
 
 :::