学习vue第二天 rective、to系列全家桶、computed、监听器

reactive 
只支持索引类型（Array, Object, Map, Set），而ref支持所有类型
reactive取值赋值不需要加.value 而ref需要加.value
reactive是一个proxy代理对象，直接复制会覆盖，破坏其响应式，解决方案，数组用push或者reactive值原本是对象，然后修改对象里面的数组

readonly
const read = readonly(obj) obj为reactive对象
被readonly包裹的对象只读不可修改
但是给原始obj赋值，read此时会受原始对象影响

const obj2 = shallowReactive({
  foo: {
    num: 1
  }
})

obj2.foo.num = 2
  obj2.foo = {
    num: 2
  }
obj2.foo.num = 2
第一种可以改变视图，第二种方式无法改变视图
和ref一样 改变reactive会变为深层次响应 因为依赖被收集了

to全家桶 toRef toRefs toRaw
toRef
toRef将非响应式数据变为响应式，从而达到能更新视图的目的
const man = {name: 'xm', age: 18, sex: 1}
let sex = toRef(man, 'sex') toRef无法修改非响应式对象
使用场景：从一个对象里拿出来一个属性

toRefs
let man = reactive({
    name: 'zs',
    age: 18,
    sex: 1
  })
let {name, age, sex} = man
使用场景：解构要用toRefs 不然不是响应式的

toRaw 解除响应式
toRaw(man) 此时man对象变为了原始

computed计算属性
如果触发依赖属性值被改变时就会更新，如果触发依赖值没改变则用缓存中的值
let all = computed<string>({
  get() {
    return xing.value + '-' + name.value
  },
  set(newVal) {
    console.log('newVal', newVal)
  }
})
const changeName = () => {
  all.value = 'C'
}
如果给计算属性赋了值，在set的参数中可以接收到
函数式写法 let all = computed(() => xing.value + '-' + name.value) 这种方式不允许其他函数修改值(all)

watch 只能监听响应式数据
watch(message, (newVal, oldVal) => {
  console.log('监听', newVal)
}) 如果需要监听多个 message改为数组就可以，同时newVal也是数组形式
对象深层嵌套开启深度监听
let message = ref({
  foo: {
    bar: {
      name: 'xm'
    }
  }
})
watch(message, (newVal, oldVal) => {
  console.log('监听', newVal)
  console.log('监听old', oldVal)
}, {
  deep: true
}) 同时会带来问题：newVal和oldVal一样