<template>
 <div id="app">
 <!-- 4. 訪(fǎng)問(wèn)響應(yīng)式數(shù)據(jù)對(duì)象中的 count -->
 {{ state.count }}
 </div>
</template>

<script>
// 1. 從 vue 中導(dǎo)入 reactive 
import {reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 // 2. 創(chuàng)建響應(yīng)式的數(shù)據(jù)對(duì)象
 const state = reactive({count: 3})

 // 3. 將響應(yīng)式數(shù)據(jù)對(duì)象state return 出去，供template使用
 return {state}
 }
}
</script>

<script>
import {ref, reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 const obj = {count: 3}
 const state1 = ref(obj)
 const state2 = reactive(obj)

 console.log(state1)
 console.log(state2)
 }
 
}
</script>

<template>
 <div>
 <div ref="el">div元素</div>
 </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
 setup() {
 // 創(chuàng)建一個(gè)DOM引用，名稱(chēng)必須與元素的ref屬性名相同
 const el = ref(null)

 // 在掛載后才能通過(guò) el 獲取到目標(biāo)元素
 onMounted(() => {
  el.value.innerHTML = '內(nèi)容被修改'
 })

 // 把創(chuàng)建的引用 return 出去
 return {el}
 }
}
</script>

<script>
// 1. 導(dǎo)入 toRef
import {toRef} from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  // 2. 將 obj 對(duì)象中屬性count的值轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)
  const state = toRef(obj, 'count')
 
  // 3. 將toRef包裝過(guò)的數(shù)據(jù)對(duì)象返回供template使用
  return {state}
 }
}
</script>

<template>
 <p>{{ state1 }}</p>
 <button @click="add1">增加</button>

 <p>{{ state2 }}</p>
 <button @click="add2">增加</button>
</template>

<script>
import {ref, toRef} from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  const state1 = ref(obj.count)
  const state2 = toRef(obj, 'count')

  function add1() {
   state1.value ++
   console.log('原始值：', obj);
   console.log('響應(yīng)式數(shù)據(jù)對(duì)象：', state1);
  }

  function add2() {
   state2.value ++
   console.log('原始值：', obj);
   console.log('響應(yīng)式數(shù)據(jù)對(duì)象：', state2);
  }

  return {state1, state2, add1, add2}
 }
}
</script>

<script>
// 1. 導(dǎo)入 toRefs
import {toRefs} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22,
   gender: 0
  }
  // 2. 將 obj 對(duì)象中屬性count的值轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)
  const state = toRefs(obj)
 
  // 3. 打印查看一下
  console.log(state)
 }
}
</script>

<script>
<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change1">改變1</button>
 <button @click="change2">改變2</button>
</template>
<script>
import {shallowReactive} from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }
  
  const state = shallowReactive(obj)
 
  function change1() {
   state.a = 7
  }

  function change2() {
   state.first.b = 8
   state.first.second.c = 9
   console.log(state);
  }

  return {state}
 }
}
</script>

<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change">改變</button>
</template>

<script>
import {shallowRef, triggerRef} from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }
  
  const state = shallowRef(obj)
  console.log(state);

  function change() {
   state.value.first.b = 8
   state.value.first.second.c = 9
   // 修改值后立即驅(qū)動(dòng)視圖更新
   triggerRef(state)
   console.log(state);
  }

  return {state, change}
 }
}
</script>

<script>
import {reactive, toRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22
  }

  const state = reactive(obj) 
  const raw = toRaw(state)

  console.log(obj === raw) // true
 }
}
</script>

<template>
 <p>{{ state.name }}</p>
 <p>{{ state.age }}</p>
 <button @click="change">改變</button>
</template>

<script>
import {reactive, markRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22
  }
  // 通過(guò)markRaw標(biāo)記原始數(shù)據(jù)obj, 使其數(shù)據(jù)更新不再被追蹤
  const raw = markRaw(obj) 
  // 試圖用reactive包裝raw, 使其變成響應(yīng)式數(shù)據(jù)
  const state = reactive(raw) 

  function change() {
   state.age = 90
   console.log(state);
  }

  return {state, change}
 }
}
</script>

<script>
import {reactive, watchEffect} from 'vue'
export default {
 setup() { 
   const state = reactive({ count: 0, name: 'zs' })

   watchEffect(() => {
   console.log(state.count)
   console.log(state.name)
   /* 初始化時(shí)打印：
     0
     zs

   1秒后打?。?
     1
     ls
   */
   })

   setTimeout(() => {
   state.count ++
   state.name = 'ls'
   }, 1000)
 }
}
</script>

<template>
 <p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
 setup() { 
  const num = ref(3)
  const instance = getCurrentInstance()
  console.log(instance)

  return {num}
 }
}
</script>

// store 文件夾下的 index.js
import Vuex from 'vuex'

const store = Vuex.createStore({
 state: {
  name: '前端印象',
  age: 22
 },
 mutations: {
  ……
 },
 ……
})

// example.vue
<script>
// 從 vuex 中導(dǎo)入 useStore 方法
import {useStore} from 'vuex'
export default {
 setup() { 
  // 獲取 vuex 實(shí)例
  const store = useStore()

  console.log(store)
 }
}
</script>