vue3 响应式api学习

1. ref(value)
   一般用于简单类型数据

使用ref()函数时，通常要注意两点：

（1）在修改值和获取值的时候，需要.value

(2)在模板中使用ref申明的响应式数据，可以省略.value

setup() {
    //  数据响应式：
    const count = ref(0)
    const obj = ref({ msg: 'hello' })
    const hClick = () => {
      count.value += 1
      console.log(obj.value.msg)
    }

    return { count, hClick }
  }

2. reactive({})

setup(){
    let state = reactive({
        supNum:10,
        oppNum:5,
    });
    const hClick = computed(() => {
        state.supNum = 'nihao'
        state.vaule = 'hihi'
    })
    return {
        state,   // 方式一：{{state.supNum}} 保持响应性，但在视图中用state.xxx，操作比较麻烦
        ...state, // 方式二：解构后返回，可以直接用 {{supNum}} ,但就没有proxy代理，也就没有监听了。以为解构实际上是建立新的赋值。

        ...toRefs(state), // 把宿主状态中的每一项都变成单位的refImpl对象。相当于把reactive和ref结合起来一起用。
        ...toRef(state.supNum), // toRef()一般对基本类型响应式处理，ref() 包装对象也可以用来引用页面元素和组件
    }
}

<template>
  <div><p ref="demo">Hello</p></div>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const demo = ref(null)
    setTimeout(() => {
      console.log('demo: ', demo.value.innerHTML)
    }, 1000)
    return {
      text
    }
  }
}
// 打印结果：
// text: Hello
</script>

3. watch
   监听某一个状态，ref创建的状态直接监听，reactive创建的某个状态要写成函数。
   watch第一次不会执行，要想执行，需要watch(function|string,handler(next,prev){},{immdiate:true})