七、单文件组件SFC

1.单文件组件

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

注：

1. template模板会自动导出，但是script里面的js代码不会，所以需要按照es6导出规范export default { } 进行导出

2. 在main.js文件中用ES6导入方式导入组件 import 组件名 from 组件所在vue文件 

 template是vue提供的容器标签，只起到包裹性质的作用，不会被渲染为真正的DOM元素

template在vue2中只能包含唯一根节点，vue3中可包含多个根节点

组件间的样式冲突：

style节点的scoped属性：scoped样式作用域，只在当前组件起作用

 /deep/ 样式穿透：

 单文件示例：hello.vue

<!-- 模板 -->
<template>
    <div>
        <h2>hello组件</h2>
    </div>
</template>

<!-- 逻辑 -->
<script>
    
    export default {
        data(){
            return {
                message:'helloworld'
            }
        },
        methods:{

        },
        computed(){

        }
    }
</script>

<!-- 样式 -->
<!-- scoped 作用域，表示样式只在单文件组件中起作用 -->
<!-- lang指定 预处理工具 -->
<style lang="scss" scoped>
  h2{
      color:red;
  }
</style>

为什么要使用SFC？

 2.构建工具

作用
.vue文件编译成浏览器能识别的html,css,js 
.scss -> .css 
压缩文件 
typescript .ts -> .js 
兼容性问题 
 es6语法 ->
    let const -> var 
...

浏览器他只认识html,css，js  

企业级项目里都可能会具备哪些功能

1. .vue文件：将我们写的.vue文件转换为浏览器能识别的html、css和js

2. typescript：如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码

3. less/sass/postcss：我们又需要安装less-loader, sass-loader等一系列编译工具

4. 语法降级: babel --->将es的新语法转换旧版浏览器可以接受的语法

5. 体积优化:uglifyjs --->将我们的代码进行压缩变成体积更小性能更高的文件

6. .....  

我们写的代码一变化就有人帮我们自动去tsc， react-compiler，less， babel,uglifyjs全部挨个走一遍 这个东西就叫做-构建工具 

 打包：将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包，打包完成以后会给我们一个浏览器可以认识的文件，将前端文件交付给后端时则需要打包。而打包好的文件必须经过服务器部署才能显示。npm run build

常用构建工具：webpack vite gulp parcel esbuild rollup grunt

注：面试问到webpack，回答vue2项目用的脚手架vuecli ，vue3项目用的vite , webpack自己私下了解过

3.webpack构建工具

使用webpack构建项目

1. 创建项目录结构
   webpack-demo1
       src
          main.js
          Hello.vue
       index.html
2. 安装环境
    npm i webpack
    npm i webpack-cli
    npm i vue-loader    编译.vue文件

vue-cli脚手架(webpack对应的脚手架工具)

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目

安装：npm install -g @vue/cli

创建项目：vue create 项目名

可视化创建：vue ui

进入项目：cd 项目名

启动项目：npm run serve

javaScript代码检查工具Eslint：ESLint - Pluggable JavaScript linter - ESLint中文

关闭eslint：在项目根目录下创建vue.config.js 文件
                    module.exports = {        lintOnSave: false    }

package.json文件：记录当前项目中安装的所有模块

热更新：改变代码组件随之改变，但不刷新浏览器页面

4.Vite构建工具

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

内置脚手架：creat-vue

执行命令创建vite+vue3项目：

安装vite
npm i vite -D

安装和执行 create-vue脚手架 选择预设 创建项目
npm init vue@latest

启动项目：

根据预设创建项目
cd 项目名
npm i 根据package.json文件安装依赖包
npm run dev 启动项目

其他指令：
node -v 查看node版本
npm run build 打包

项目目录结构：

 vite.config.js文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],  // vue插件
  resolve: {
    //alias 别名 
    alias: {
      // @表示./src目录   如: ./src/component/a.vue  -> @/compnent/a.vue
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

vite较于webpack的优势

我们开始构建越来越大型的应用时，需要处理的 JavaScript代码量也呈指数级增长，包含数千个模块的大型项目相当普遍。 我们开始遇到性能瓶颈一使用JavaScript 开发的工具通常需要很长时间（甚至是几分钟!)才能启动开发服务器， 即使使用HNR(热更新)，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。 如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。  

起因:我们的项目越大----〉构建工具( webpack )所要处理的js代码就越多【跟webpack的一个构建过程(工作流程）有关系】

造成的结果:构建工具需要很长时间才能启动开发服务器（启动开发服务器---〉把项目跑起来) 
 
  webpack支持多种模块化，他一开始必须要统一模块化代码，所以意味着他需要将所有的依赖全部读一遍

vite会不会直接把webpack干翻？vite是基于es modules的，侧重点不一样，webpack更多的关注兼容性，而vite关注浏览器端的开发体验 

5.单页应用

单页应用，简单来说就是只有一个html页面，全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

八. 路由

1.路由（route）就是一组 key-value 的对应关系

2.多个路由需要经过路由器（router）的管理 

 

1. vue-router插件库

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

插件的安装使用：

 1.安装router插件    npm install vue-router@4 --save   对应vue3版本

 2. 在 src 文件夹下创建 router 文件夹，再在里面创建路由模块文件 index.js，该文件专门用于创建整个应用的路由器

        1>. 导入路由插件vue-router  

                 import {createRouter, createWebHashHistory（设置路由hash模式）, createWebHistory（设置路由history模式）} from "vue-router";  

        2>. 创建路由对象，配置路由规则

                

                 

        3>. 暴露路由模块

                 

 3.  main.js入口文件中集成路由插件到vue

         import Vue from 'vue'

         import App from './App.vue'

         import router from './router.js'

         createApp(App)  .use(router)  .mount('#app')

        

4.路由输出组件位置

         <router-view></router-view> 将显示与 url 对应的组件，可以放在任何地方，以适应布局。一般定义到 APP.vue 文件中。

        

 5. router-link路由导航组件

       自定义组件 router-link 来创建链接，使得Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

         

        

        点击就可以跳转，router-link就相当于a标签

2. 路由注意点

  1.路由组件和一般组件

        路由组件：靠路由规则匹配出来，由路由器渲染的组件，不需要亲自注册和直接写标签使用，创建文件夹views或pages放在其中

        一般组件：需要引入注册并且使用了组件标签，放在components中

  2. 通过切换，“隐藏”了的路由组件默认是被销毁掉的，需要的时候再去挂载

      

 3.每个路由组件都有自己的$route属性，里面存储着自己的路由信息

 4.整个应该只有一个router，可以通过组件的$router属性获取到

3. 路径路由与命名路由

命名路由作用是路径过长时简化路由的跳转

4. 嵌套路由（多级路由）

5. 路由传参

     1.query参数 （不打扰配置）

传递参数：

跳转并携带query参数，to的字符串写法
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

跳转并携带query参数，to的对象写法
<router-link 
    :to="{
        path:'/home/message/detail',
        query:{
            id:666,
            title:'你好'}
    }"
>跳转</router-link>

接收参数:

$route.query.id
$route.query.title

     2.params参数

               1.配置路由，声明接收params参数，例如

                

                2.传递参数

                 

     特别注意： 路由携带params参数时，若使用to的对象写法，不能使用path配置项，只能使用name配置！

                 3.接收参数

$route.params.id
$route.params.title

6. 路由的props配置

        作用：让路由组件更方便的接收参数

7. 浏览器的历史记录写入方式

        1.push追加记录（压栈）（路由跳转时默认为push）

 指针默认指向最上面的地址，点击返回前进时指针下移 / 上移

        2.replace替换当前记录（当前栈点是谁就替换谁）

              replace是<router-link>的属性，用来控制路由跳转时操作浏览器历史记录的模式

               开启replace模式：<router-link replace ......></router-link>

8. 编程导航（不借助router-link的路由导航）

     路由器 router 是 VueRouter构造函数 的实例对象

 export default {
        created(){
            console.log('this.$route  ',this.$route)
        },
        methods:{
            onConfirm(){
                // router是路由对象  route 路由信息对象
                this.$router.push({path:'/nba'})
                // this.$router.replace({path:'/nba'})
                
                this.$router.push({
                name:'xiao',
                    params:{
                        id:xxx,
                        title:xxx
                    }    
            })
                this.$router.replace({
                name:'xiao',
                    params:{
                        id:xxx,
                        title:xxx
                    }    
            })
            }
        }
    }

9. 缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include="组件名">
     <router-view></router-view>
</keep-alive>

当有其中多个组件需要缓存时，写为
<keep-alive :include="['组件名1','组件2']">
    <router-view></router-view>
</keep-alive>

如果不写 include 则 router-view 位置要展示的所有组件都不会被销毁

  两个新的生命周期钩子函数

       路由组件独有的两个钩子，用于捕获路由组件的激活状态

        1.actived：路由组件被激活时触发

        2.deactived：路由组件失活时触发

10. 路由守卫---对路由进行权限控制

   分类：全局守卫、独享守卫、组件内守卫

  1.全局守卫

    前置路由守卫---初始化时候被调用、每次路由切换前被调用

                 注：因为是切换前就被调用，所以如果被拦截路径是不会改变的。例如从home-news被拦截，这时已经点击切换了但是路径不变，仍为home的路径

                例如：在Local Storage中设置school为atguigu ，在点击 News 和 Message时校验school是否为 atguigu ，如果不是就不出现该组件内容，即无权访问

      

 

 

 使用路由元信息meta（程序员可以自定义的信息称为元信息 ），在需要鉴权的路由配置中加入meta：{ isAuth : true}

    后置路由守卫---初始化时执行、每次路由切换后执行

           一般使用较少，下例为切换组件时，网页 title 随之更改。

           注：后置守卫是没有 next 的，因为已经切换完成，相当于已经放行了。

     

  每次放行前调用也可以   

    注：初始化界面即路径为 #/ 时的网页标题可以在 public文件夹下的 index.html文件中配置

 2.独享守卫---没有后置守卫

        需要鉴权的路由中单独配置，beforeEnter 。可以和全局守卫的后置守卫搭配同时使用。

 3.组件内路由守卫

没有前置后置一说，只有进入守卫和离开守卫，通过路由规则进入和离开（只有触发路径变化，前端路由器监测到了匹配路由规则，才能称为通过路由规则）组件时被调用。也可以和全局后置同时搭配使用。

 

11. history模式和hash模式

hash值：对于 url 来说，#及其后面的所有内容就是 hash 值。hash 值不会包含在 HTTP 请求中，也就是说 hash 值不会带给服务器。

hash模式：

        1. 地址中永远带着 # ，不美观；

        2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法；

        3. 兼容性较好。

history模式：

        1. 地址干净、美观；

        2.兼容性相较于hash模式来说略差；

        3.应用部署上线时需要后端人员支持，解决刷新页面服务端就404的问题。

九. Vuex

概念：

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读 / 写），也是一种组件间通信的方式，适用于任意组件间通信。

Github地址：https://github/vuejs/vuex

什么时候使用：简单来说就是需要共享的时候

 -多个组件依赖于同一状态

 -来自不同组件的行为需要变更同一状态

实现多组件共享数据---中央事件总线 和 vuex 的对比

 

1. Vuex工作原理

 1. state：页面状态管理容器对象。集中存储Vue components状态数据

 2. mutations：状态改变操作方法，由actions中的commit(‘mutation 名称’)来触发。 是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。

 3. commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方      法。    

 4. actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。

 5. dispatch：操作行为触发方法，是唯一能执行action的方法。

 6. getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

安装下载：npm i vuex  安装的是vuex4版本

                        如果要安装3版本  npm i vuex@3

引入Vuex ，创建src / store文件夹，创建index.js文件

注：import引入的文件会先解析

 基本使用：

        1.初始化数据，配置actions、mutations，操作文件store.js

 

        2.  组件中读取vuex中数据：$store.state.sum

        3.  组件中修改vuex中数据：$store.dispatch( ' action中的方法名 '，数据 ) 或  $storemit( ' mutation中的方法名 '，数据 )

 注：若没有网络请求或其他业务逻辑，组件中也可直接越过actions，即不写dispatch，直接写commit

2. getters配置项

 3. mapState和mapGetters

这两个方法用于映射 state / getters 中的数据为计算属性。需要先引入：

import { mapState , mapGetters } from 'vuex'

 

 4. mapMutations 和 map

这两个方法用于生成与  mutations / actions 对话的方法，即包含 $storemit (xxx) / $store.dispatch (xxx) 的函数 。需要先引入：

import { mapMucations , mapActions } from 'vuex'

注：二者使用时若需要传递参数则要在模板中绑定事件时就传递好参数，否则参数为事件对象。

 

5. 多组件共享数据

十. 常用Composition API（组合式API）

1.setup

注意点：

2. ref函数

作用：定义一个响应式的数据

因为接收基本类型时是靠getter 和 setter ，所以操作数据需要.value ，当是对象类型时，是靠proxy ，不再需要点value

 

3. reactive函数

作用：定义一个对象类型的响应式数据，基本类型只能用ref函数。操作数据不需要.value

 

 可以直接通过索引改变数组元素

 

4. vue3响应式原理

一个无关的知识：什么是API？

API是Application Programming Interface（应用程序接口）的缩写。是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

5. reactive对比ref

6. 计算属性

 

7. watch

注意点：

1. 监视reactive定义的响应式数据时，oldValue无法正确获取、强制开启了深度监听（deep配置失效） 

2. 监视reactive定义的响应式数据中某个属性时，deep配置有效

 

8. 生命周期

 组合式api 相较于 配置项 的生命周期钩子优先级更高，形如

9. 自定义hook函数

-hook：本质上是一个函数，把setup函数中使用的组合式API进行封装

-类型于vue2中的mixin

-自定义hook的优势：代码复用，让setup界面更简洁，逻辑更清楚

 

 

 

 一个无关的知识点：形如叫作分别暴露，引入时需要加 {}

 形如叫默认暴露，不用加 {}

10. toRef

 

 11. shallowReactive 与 shallowRef

12. readonly 与 shallowReadonly

 当复用别的组件而不希望真正使用的组件去修改原组件数据，就可以使用。使用语法：

13. toRaw 和 markRaw