Vue3+TypeScript学习笔记

ref与reactive的使用

ref

作用：一般用来定义一个基本类型的响应式数据，创建一个包含响应式数据的引用(reference)对象
用法：js中操作数据: xxx.value，模板中操作数据: 不需要.value

reactive

作用：定义多个数据的响应式，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
用法：const proxy = reactive(obj)；// 接收一个普通对象然后返回该普通对象的响应式代理器对象

toRef 与toRefs的使用

toref

作用：为源响应式对象上的某个属性创建一个 ref对象, 
     二者内部操作的是同一个数据值, 更新时二者是同步的
使用场景：要将响应式对象中得某个属性单独提供给外部使用时

toRefs

作用：把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
使用场景：可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

toRaw 与 markRaw的使用

toRaw

作用：将一个由reactive生成的响应式对象转为普通对象
使用：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

markRaw

作用：标记一个对象，使其永远不会转换为代理。返回对象本身
使用场景：有些值不应被设置为响应式的，例如复杂的第三方类库等

computed 和 watch的使用

computed

    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    })

    // 只有getter的计算属性
    const fullName1 = computed(() => {
      console.log('fullName1')
      return user.firstName + '-' + user.lastName
    })

    // 有getter与setter的计算属性
    const fullName2 = computed({
      get () {
        console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
      },

      set (value: string) {
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
————————————————
版权声明：本文为CSDN博主「淮城一只猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40280582/article/details/112444461

watch

    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

    /* 
    watch一个数据
      默认在数据发生改变时执行回调
    */
    watch(fullName3, (value) => {
      console.log('watch')
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    })

    /* 
    watch响应式对象中某个值
    */
    watch(
	()=> state.a,
	(newValue, oldValue)=> {
		// ... 微队列调用
	},
	options // 配置参数对象 如immediate
    )

    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
      console.log('监视多个数据', values)
    })
————————————————
版权声明：本文为CSDN博主「淮城一只猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40280582/article/details/112444461