记录日常的一些vue3使用过程中的问题

vue2

在自定义组件中使用v-model

v-model是一个语法糖，当使用在组件上时，会被渲染成:

<custom :value="value" @input="()=>{value = $event.target.value}"></custom>

其中props value 和 event input是v-model的默认参数设置
可以在子组件中声明model对象改变默认配置，例如:

export default{
	model:{
    	prop: 'customValue',
        event: 'customEvent'
    }
}

vue3

在对象中使用响应式变量

<script setup>
import { ref,computed } from 'vue'
import {useTest} from "./test.js"
  const a = ref(0)

  const opt =  ref({b:a})
  const opt2 =  ref({
      b:a.value
  })
  const opt3 =  computed(()=>{
    return {b:a.value}
  }) 
  a.value = 3; 
</script>

<template>
  <p>
    {{opt}}  //显示 {b:3}
  </p>
  <p>
    {{opt2}} //显示 {b:0}
  </p>
    <p>
    {{opt3}} //显示 {b:3}
  </p>
</template>

如果使用.value的形式进行赋值，那么在 ref 更新时不会触发副作用更新，需要使用computed计算属性进行依赖收集实现响应式。