【Vue3】笔记

一、ref、reactive、toRefs

ref 简单数据类型

1. 将传入参数的值包装为一个带 value 属性的对象，将基本数据转换引用数据类型
2. 模板上使用的时候会自动解析，将 value 去掉，直接使用对应的属性就行了

reactive 引用数据类型

1. 将对象里面的值进行解构以后会失去响应式
2. 对 string、number、Boolean 无效，只对对象类型生效

toRefs 使解构后的数据重新获取响应式

1. 一般使用 setup 函数的写法，如果数据层级复杂的时候，可以使用 ...toRefs(值) 进行解构，直接解构的话会让数据失去响应式

二、watch 侦听器

watch

// 1. 监听简单数据类型
watch(meg, (newValue, oldValue) => {
  console.log( newValue, oldValue)
})

// 2. 监听对象的某个属性值
// 响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调，使用 ()=> obj.name 每次返回一个新对象
watch(
  () => obj.name,
  (newValue, oldValue) => {
    // 仅当 obj.name 被替换时触发，单独修改里面的属性不会触发
    console.log( newValue, oldValue)
  }
)

// 3. 不被替换也触发的话
// 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。
watch(
  () => obj.name,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了，单独修改里面的属性不会触发
    console.log( newValue, oldValue)
  },
  // 添加 deep 深度监听,修改后触发,immediate 页面一加载就触发
  {deep:true , immediate: true }
)

watchEffect

// 不需要指定监听的属性，组件初始化的时候会执行一次，自动收集函数中使用的响应式属性，当里面的值发生变化就会触发函数
// 不能获取旧值，能拿到新的值
watchEffect(() => {
  // obj.name 整个被替换掉才触发，单独修改里面的属性不会触发
  console.log(obj.name)
})

区别

1. watch 需要指定监听的属性，watchEffect 会自动收集回调中使用的属性，代码简洁
2. 当不需要拿到旧值的时候，可以使用 watchEffect。

三、setup 中的参数

setup(props, context) {
    // 父组件传递的参数，存储在 props 对象中
    console.log(props)
    // context 有 attrs emit expose slots
    // attrs 接收传递的属性 
    // emit 自定义事件，将子组件的数据发送父组件，进行接收 
    // expose 可以将当前组件方法、属性暴露出去，再通过 ref 获取对应的值，当使用了 h 渲染函数时，还想获取 setup 的指定时可以通过该方法
    // slots 
    console.log(props)
},