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!
    */
    

refreactive区别

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

watchwatchEffect区别

  • watchEffect立即执行传入的函数(它没有显示指定监听项,需要执行回调来收集响应式依赖),也就是说watchEffect至少执行一次,而watch仅在监听的数据变化时执行
  • watchEffect是在监听的数据被改变后执行,无法得到更新前的值,而watch更新前后的值都可以获得

exposedefineExpose

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

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

你可能感兴趣的:(Vue,JavaScript,vue.js,javascript,前端)