Vue3 使用重点记录

节选于教程: Vue3 入门指南与实战案例

1.响应式API

1.1 ref

 Ref 对象的值的读取，切记！必须通过 .value 

例子:

// 读取一个字符串
const msg = ref<string>('Hello World!')
console.log(msg.value)

// 读取一个数组
const uids = ref<number[]>([1, 2, 3])
console.log(uids.value[1])

1.2 reactive 是继 ref 之后最常用的一个响应式 API 了，相对于 ref ，它的局限性在于只适合对象、数组。

不要对 Reactive 数据进行 ES6 的解构 操作，因为解构后得到的变量会失去响应性。

Reactive 数组,不推荐用传统的uids = [] 重置,会失去响应性,要通过重置数组的 length 长度来实现数据的重置：

const uids: number[] = reactive([1, 2, 3])

/**
 * 推荐使用这种方式，不会破坏响应性
 */
uids.length = 0

// 异步获取数据后，模板可以正确的展示
setTimeout(() => {
  uids.push(1)
}, 1000)

 2.子组件向父组件传递数据

// 获取 emit,注意需要直接在setup范围下,放在具体方法里,可能会因作用域导致获取不到defineEmits
const emit = defineEmits(['quanping-cyjs']);