Vue框架

Vue框架

       Vue-router路由

              vue3项目红如何配置路由

                     1.下载vue-router，在路由文件中引入相关依赖

                     2.创建路由信息对象数组

                     3.创建路由管理器对象并对外抛出

                     4.在main.js使用use(router)方法，将路由管理对象与当前vue项目相关联

                     5.在项目中设置路由导航router-link与路由出口router-view

                     常见面试题：route、routes、router的区别

                            route：一组路由信息对象

                                   {path: '/foo', component: Foo}

                            routes：路由信息对象数组

                                    const routes: [

        {path: '/', redirect: '/bar'},

        {path: '/bar', component: Bar},

        {path: '/foo', component: Foo},

        {path: '/user', component: User}

　　　　　　　　　　　　　　　　]

                            router：路由管理器对象

                                   const router = createRouter({      })

动态路由

                     定义：我们经常需要把某种模式匹配到所有路由，全都映射到同个组件

例如，我们有一个user组件，对于所有ID各不相同的用户，都要用这个组件来渲染

                            一个[路径参数]使用冒号：标记；

                            可以在一个路由中设置多端[路径参数]

                     动态路由的传参

                            1.params传参

                                   定义动态路由

                                   传输参数

                                   接收参数

                            props传参

                                   值为布尔值的形式

                                          定义动态路由

                                          传输参数

                                          接收参数

                                   值为函数的形式

                     动态路由切换时的特点

                           

-动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用

已经渲染过的路由组件（知识会修改路由参数值），这样增加了程

序的高效及时性

-另一方面，组建的生命周期钩子回调函数不会再次调用

                            如何解决

状态管理库vuex

              Vuex是一个专为Vue.js应用程序开发的状态管理库。状态就是指组件之间共享的数据

              vue项目中配置状态管理库vuex的流程

                     1.下载并引入vuex相关内容

                     2.创建状态管理库对象store

                     3.对外抛出store对象

                     4.在main.js中将store对象与当前项目相关联

              store状态管理库重要组成部分

                     state：组件之间共享的数据集合

                            组件中获取方法

                                   1.直接获取

this.$sotre,state.user

                                   2.使用对象含开运算符的形式

...mapState(['count','user'])

                     getters:相当于store对象计算属性（主要用于对state的数据进行过滤）

                            组件中获取方法

                                   1.直接获取

this.$store.getters.xxx;

                                   2.使用对象展开运算符的形式获取

...mapGetters(['xxx','xxx'])

                     mutation：定义了修改store对象中的state数据的同步方法(要修改的数据不是Ajax异步获取的)

                            组件中如何触发

                                   1.直接用commit触发

this.$store.commit('xxx','传递参数')

                                   2.使用对象展开运算符mapMutations的形式获取

...mapMutations(['xxx','xxx'])

                     actions:定义了修改state数据的异步方法(修改数据是Ajax获取的异步数据)

                            组件中如何触发

                                   1.直接用dispatch触发

this.$store.dispatch('xxx','传递参数')

                                   2.使用对下昂展开运算符mapActions的形式获取

...mapActions(['xxx','xxx'])

       合成APIsetup()

 

Vue3最重要新特性之一

                     作用：之前vue对象规定了我们必须把某一类数据放到某一个机构中，这样在一定程度上对我们的代码进行了强制的分割。

在vue3中，我们引入了setup()合成API语法，它可以将某数据关联的内容都整合到一个部分，即使setup()中的内容越来越多，也会围绕大而不乱的形式开发项目

              setup()特点

                     1.setup()结构中定义的变量，函数都需要return 之后才可以在模板中使用

2.setup()API是处于created()生命周期之前的函数，也就是说data，methods中的数据时无法访问到的，setup()结构中的this指向undefined

ref：在setup中只能包装字符串或数字形式的数据使其变为响应式布局

reactive： 在setup中包装对象，数组形式的数据（对象/数组），使其变成响应式数据

refs：可以直接在html模板中使用对象的属性名当变量，不需要用.访问

              setup()结构中如何使用声明周期函数(vue3.0)