Vue3简介 ​

import { watchEffect } from 'vue'
// 监听基本数据
watchEffect(() => { 
  localStorage.setItem('count', count.value)
})

<script setup>
import { ref, watch, watchEffect } from 'vue'
const count = ref(0)
// 监听基本数据
watch(count, () => {

})

// 监听多个数据, 此时newValue和oldValue都是数组
watch([count, count2], (newValue, oldValue) => {
  
})

// 监听对象中的某个值
watch(() => obj.name, (newValue, oldValue) => {

})

// 可选项
watch(() => obj.name, (newValue, oldValue) => {

}, { 
  immediate: true, // 是否立即调用
  deep: true // 是否开启深度监听
})
</script>

<script setup>
import { ref, Ref } from 'vue'
// number
const count = ref(0)
// string
const str = ref('')
// 定义dom的ref
const domRef = ref()
// 类型定义
let message: Ref<string | number> = ref("我是message")

// 修改数据
count.value = 1
// 访问数据
console.log(count.value)
</script>

<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => {
  return count.value * 2
})
</script>

### 3.6、reactive
```js
<script setup>
import { reactive } from 'vue'
const obj = reactive({
  name: 'zw',
  age: 18
})
// 修改数据
obj.name = 'zz'
// 访问数据
console.log(obj.name)
</script>

import { toRefs } from 'vue'
const obj = reactive({
  name: 'zw',
  age: 18
})
const { name, age } = toRefs(obj)
// 修改数据
name.value = 'zz'
// 访问数据
console.log(age.value)
</script>

import { nextTick } from 'vue'

nextTick(() => {
  // this._initScroll();
})
</script>