vue学习记录

Vue中学习遇到的问题

生命周期钩子函数注意

• beforeUpdate/updated钩子是指视图发生变化时执行（初始渲染时不会执行），而不是组件中响应式数据发生变化时，换而言之就是如果一个组件中的响应式数据并没有在视图中渲染，那么即便该数据发生变化时，也不会执行该钩子函数。更准确来讲是发生在虚拟DOM打补丁前/后。

• setup()中可以对同一个生命周期钩子多次注册，从而获得多个回调

  export default {
   // ....	
    setup(){
      onBeforeUpdate(()=>console.log('setup beforeUpdate_1'))
      onBeforeUpdate(()=>console.log('setup beforeUpdate_2'))
    }
  // ...  
  }
  /* 当视图刷新时输出
  setup beforeUpdate_1
  setup beforeUpdate_2
  */
  

• setup()中注册的生命周期钩子函数比外面组件的生命周期个钩子函数先执行

  export default {
   // ....	
    updated(){
      console.log('top updated!')
    },
    setup(){
      onUpdated(()=>console.log('setup updated!'))
    }
  // ...  
  }
  /* 当视图刷新时输出
  setup updated!
  top updated!
  */
  

ref和reactive区别

• ref可以封装基本类型和对象（对象是借助reactive实现），reactive只能封装对象
• ref封装对象后需要使用obj.value才能访问到对象，而reactive访问方式和封装之前一样

watch和watchEffect注意

• watchEffect立即执行传入的函数（它没有显示指定监听项，需要执行回调来收集响应式依赖），也就是说watchEffect至少执行一次，而watch仅在监听的数据变化时执行
• watchEffect是在监听的数据被改变后执行，无法得到更新前的值，而watch更新前后的值都可以获得
• 当watch与watchEffect监听一个对象或者数组时，如果对象或数组本身没有改变，那么将不会触发侦听器
• watch与this.$watch一样支持选项，但watchEffect不支持任何选项

watch与this.$watch

​ 当变更（不是替换）对象或数组并使用 deep 选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

import { reactive, watch } from 'vue'
const obj = reactive({
  site: 500
})
watch(obj, (pre, current) => {
  console.log(pre.site, current.site)
}, { deep: true })
obj.site++
/*
501 501
*/

expose与defineExpose

• 在 Vue 3.2 中新增的 expose 是一个函数，该函数允许通过公共组件实例暴露特定的 property。默认情况下，通过 ref、$parent 或 $root 获取的公共实例等同于模板所使用的内部实例。调用 expose 将限制公共实例可以访问的 property。

  由 Vue 自身定义的 property，比如 $el 和 $parent，将始终可以被公共实例访问，并不需要列出。

  export default {
    props:['title', 'id'],
    setup(props, {expose}){
      expose({
        title: props.title
      })
    }
  }
  

• 在<script setup>标签的情景中，通过 ref、$parent 或 $root 获取的公共实例是空。调用 defineExpose 可以暴露指定的内容，接受选项和expose一致。

<script setup>注意

• 当defineProps使用时，普通<script>标签中的定义的选项式API中的props将会失效。
• 使用<script setup>标签的时候，选项式API中的setup()函数将会失效。