vue3学习

标签：setup vue3 学习 使用 组件 数据 可以

资料： http://docs.vikingship.xyz/

 

声明类型：

     1.使用ref可以声明基础数据

     2.使用reactive声明对象数据  

     3.computed可以返回一个不变的响应式对象

     比vue2优势：可以直接新增或修改对象数据，也能实时更新

      

       基础数据：

      

      对象数据：

       

 

生命周期：

     beforeDestroy 变为 beforeUnmount

     destroyed        变为  unmounted

     其他都可以在setup函数中使用，前提是加上on

       

       

 

 侦测变化watch:

      监听响应式数据变化，并处理副作用逻辑

      可以监听多个，用数组存放

      

        

       

 

 

功能模块化：

      vue3新加核心，就是功能模块化，相同功能不必在依靠mixin，直接在Setup()中使用

     例：

      

        

 

 teleport组件传送：

      可以将深层组件，渲染到指定dom元素上

      使用场景：深层fixed组件，有时候会因为父组件变为absolute组件，这个时候就可以传送出去

      

 

在setup中使用emit：

       

 

 Suspense:异步组件请求成功才显示

     类似骨架屏的作用，不用再写状态

      

     异步组件的setup必须返回一个promise,也可以使用下面的写法

     

 

 vue3变化的全局API：

     

 

 

 

setup中获取ref的dom元素：

     

      

 

子组件与父组件双向绑定：

     父组件：

      

     子组件：

      

 

$attrs：由父组件传递的属性或事件，子组件未声明props，会默认作用于子组件的根元素上

     1.父组件传递的属性

     

    2.子组件不接收，并且设置inheritAttrs：false

      

      3.绑定$attrs,这样子组件就能接收使用placeholder等属性

      

 

并列组件或兄弟组件或任意组件之间传值:

    vue3中可以借助插件 npm i mitt 来辅助

    https://www.npmjs.com/package/mitt

 

vue-router4:

     在vue3中setup的使用：使用钩子函数

      获取参数

      

      js跳转路由

        

 

Vuex4:

     vue3的setup中使用：钩子函数 useStore

 

标签：setup,vue3,学习,使用,组件,数据,可以
From： https://www.cnblogs.com/fanbulaile/p/16522740.html