知识点整理：关于vue项目

最新推荐文章于 2023-08-10 09:36:59 发布

Crazy_GirlLL

最新推荐文章于 2023-08-10 09:36:59 发布

阅读量321

点赞数

分类专栏： VUE 文章标签： vue 前端

本文链接：https://blog.csdn.net/Crazy_GirlLL/article/details/114373876

版权

VUE 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

vue-cli+webpack如何创建一个vue架子

先安装node，检查是否安装成功了：node -v
安装npm，检查是否安装成功了npm -v
进入的地址，cd desktop
安装cnpm，npm install -g cnpm --registry=https://registry.npm.taobao.org
用cnpm全局安装vue-cli，cnpm install -g vue-cli
初始化项目：vue init webpack project (project 是项目名字)
然后根据命名行的提问，填写一些东西：标题呀，项目描述呀，作者呀，是否下载路由呀，是否下载eslint语法检查呀
项目初始化完成，进入项目cd project
启动项目：npm run dev

webpack：https://blog.csdn.net/Crazy_GirlLL/article/details/114657663

https://www.jianshu.com/p/216ed82a3e49

vue2和vue3 的区别

vue.set

vue.set修改数组，因为vue对数组内部改变不敏感，所以，使用其对数组进行修改

vue.set(要改变的数组，要改变的数组的下标，新值）===》vue.set（this.arr，0，2）

vue.set不仅可以修改数组中的某项，还可以用来增加

动态路由：

前端写好路由表，然后根据后端请求得到的登录用户的角色，对路由进行筛选，获得该登录用户的路由，然后展示渲染（beforeEach，addRoutes，elementUI的菜单组件）：https://blog.csdn.net/Crazy_GirlLL/article/details/114666818
后端返回路由，前端请求接口，获取到路由之后，遍历成自己需要的路由对象，然后展示，渲染（beforeEach，addRoutes，elementUI的菜单组件）：https://blog.csdn.net/Crazy_GirlLL/article/details/114666885

vue-router的scrollBehavior：切换组件时，页面不从顶部开始，从上个页面浏览的位置开始的情况

简单粗暴的方法是，router的前值守卫beforeEach中：document.documentElement.scrollTop=0
使用scrollBehavior，也可解决keep-alive标签后部分安卓机返回缓存页位置不精确问题

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  return { x: 0, y:0 };
 },
});
————————————————
原文链接：https://blog.csdn.net/q3254421/article/details/84777614

MVVM，MCV模块化设计模式和开发流程：

**前后端不分离**的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前后端的耦合度很高

这种应用模式，比较适合纯网页应用，但是当后端对接APP时，APP可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口，不再适用于前端APP应用，为了对接APP还要再开发一套接口

**前后端分离**是一种开发模式，前端负责将数据按照产品设计渲染以及调用后端接口，实现产品功能，而后端则提供数据接口，功能接口，前后端分离的开发模式是为了让专业的人做专业的事，且现在前端和后端可以通过接口文档实现并行开发，提高开发效率

**MVVM定义**：MVVM是Model-View-ViewModel的简写，即**模型-视图-视图模型**。【模型】是指后端传递的数据。【视图】是指所看到的页面。【视图模型】是mvvm模式的核心，他是连接view和model的桥梁。他有**两个方向**，一是将【模型】转化成【视图】，即后端传递的数据转化成所看到的页面，**实现方式**：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。**实现方式**：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定

总结：在MVVM的框架下，视图和模型是不能直接通信的，他们通过ViewModel来通信，viewModel通常要是想一个observer观察者，当数据发生变化，viewModel能够监听到数据的变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知到对应的数据做改动，这实际上就实现了数据的双向绑定，而且MVVM中的view和ViewModel也可以相互通信。

**MVC定义**：MVC是Model-View-Controller的缩写。即模型-视图-控制器，m和v和上述意思一样，c即Controller值得就是页面业务逻辑，使用**MVC的目的就是将M和V代码分离**，MVC是单向通信，也就是View和Model，必须通过Controller来承上启下

详见：https://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc

双向绑定的原理

vue最独特的特性之一，是其非侵入性的响应式系统，数据模型仅仅是普通的JavaScript对象，而当你修改他们时，视图会进行更新，这使得状态管理非常简单直接

当数据变化后，会重新对页面渲染，这就是vue的响应式

完成这一过程需要：

1，检测数据的变化

- 在JavaScript中，使用`Object.definePeoperty`和`Proxy`来检测一个数据的变化，这就是数据劫持或者数据代理

- 前者不支持数组的长度变化，即无法检测到对象属性的添加或删除，不能监听数组的变化，需要进行数组方法的重写，若修改数组中的第一个元素，也无法检测数组的变化

- 第二种的兼容性并不好

2，收集视图依赖了哪些数据

- 我们只有通过收集依赖才能知道哪些地方依赖我的数据，以及数据更新时派发更新

- 数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）

- 收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep，它用来收集依赖，删除依赖和向依赖发送消息等，具体点也就是用来存放Watcher观察者对象，我们可以把Watcher理解成一个中介的角色，数据发生变化时通知它，然后他再通知其他地方,

**总结**：

- 在`New Vue()`后，vue实例会调用`_init`函数初始化，也就是init过程，在这个过程中Data会被observer转化成getter/setter形式，来监测数据的变化，当被设置的对象被读取的时候，会调用`getter`函数，当被赋值的时候，会调用`setter`函数
- 当外界通过`watcher`来读取数据的时候，会触发`getter`函数将`watcher`添加到依赖中
- 当修改对象值时，会触发`setter`函数，`setter`函数会通知之前依赖收集得到的Dep中的每一个watcher，告诉他们，值改变了，需要重新渲染视图，这时，watcher就会调用`update`去更新视图

虚拟dom：

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建样式表——创建Render树——布局Layout——绘制Painting
DOM树的构建是文档加载完成开始的？构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。
Render树是DOM树和CSSOM树构建完毕才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。
CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。

JS操作真实DOM的代价！

传统的开发模式，原生js或者JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程，在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行，最终执行10次。

例如，再一次计算完，紧接着下一个DOM更新请求，这个接二店的坐标值就变了，前一次的计算为无用功，如此频繁的操作就有可能出现页面卡顿，影响用户体验

为什么需要虚拟DOM，它有什么好处?

虚拟DOM就是为了解决浏览器性能问题而被设计出来的，如上，若操作一次中有10次更新DOM的操作，虚拟DOM不会立即操作DOM，而是将这10次更新的内容保存到本地的一个js对象中，最终将这个js对象一次性的给到DOM树，再进行后续操作，避免大量无谓的计算量。

所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象（虚拟DOM）上，操作内存中的JS对象的速度显然要更快，等更新完成之后，再讲最终的js对象映射成真是的DOM ，交由浏览器去绘制
链接：https://www.jianshu.com/p/af0b398602bc

NPM 模块安装机制：

- 发出npm install命令

- 查询node_modules目录之中是否已经存在指定模块

- 若存在，不再重新安装

- 若不存在

- npm 向 registry 查询模块压缩包的网址
- 下载压缩包，存放在根目录下的`.npm`目录里
- 解压压缩包到当前项目的`node_modules`目录

传值方式

子传父：子组件this.$emit('fn',val)，父组件中在子组件中绑定监听函数fn，
父传子：父组件在子组件中绑定要传入的数据:childMsg="parentMsg"，子组件props:['childMsg']
bus公共组件：传参组件bus.$emit('fn',val)，获参组件bus.$on('fn',(data)=>{})
vuex
路由传参
跳转传参

路由中hash和history的区别：

history方式：url中不带#，比如“https://baidu.com/home“，是H5新推出的（pushState与replaceState）；build之后本地 index.html 打开是无效的
hash方式：url中带#，比如“https://baidu.com/#/home”，是vue默认的，支持低版本和IE浏览器；build之后本地 index.html 打开正常！
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。
原文链接：http://www.lucklnk.com/godaddy/details/aid/154901038

生命周期函数：

beforeCreate(创建前)，在数据观测和初始化事件还未开始
created(创建后)，完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount(载入前)，编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后），在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行与页面数据有关的ajax交互。
beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

业务场景

created:进行ajax请求异步数据的获取、初始化数据
mounted:挂载元素dom节点的获取
nextTick:针对单一事件更新数据后立即操作dom
updated:任何数据的更新，如果要做统一的业务逻辑处理
watch:监听数据变化，并做相应的处理
链接：https://www.jianshu.com/p/57d230ae5538

params和query的区别：

params：类似ajax的post请求，不会把参数放到url中，只要用name引入；刷新会丢失传参内容
query：类似ajax的get请求，会把参数放到url中，用name，path引入都行；刷新不会丢失传参内容

vuex的使用：

定义：vuex是一个专门为vue.js应用程序开发的状态管理模式，集中存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

state

mutations

actions

getters

mapState

mapGetters

mapActions

作用

用来存储全局访问的变量

用来修改state里面的数据

和mutations一样，用来修改state里面的数据，但这里是异步操作，而且不能直接修改，需要提交到mutations里面让其修改：this.$store.commit('fn')；

和组件中的computed类似，对state里面数据的二次加工

也是获取方法，使用数据，只是

和前面不同，不需要使用this.$store.state.val来调用；

同mapState

使用方法

this.$store.state.变量

this.$store.commit('fn'，val)；

fn为mutations里面的函数

this.$store.dispatch('fn',val)；

fn为actions里面的函数

this.$store.getters.fn

fn为getters里面的函数

先引入：import {mapState,mapGetters,mapActions} from 'vuex'
methods或者computed中，配合es6展开运算符使用

...mapState({

count1:state=>state.count})

...mapGetters({

count1:state=>state.count})

至于module的话，感兴趣可以去vuex官网看，也就是当数据多的时候，划分了多个模块，便于编写代码

详情：https://blog.csdn.net/Crazy_GirlLL/article/details/114699180

vuex中保存的东西，刷新之后就没了咋办？

使用localstorage，如果vuex里面有数据，就从vuex里面取，如果没有，则从localstorage取
插件vuex-persistedstate：https://blog.csdn.net/Crazy_GirlLL/article/details/114700410

公共导出方法，创建a标签的方法？

import axios from "axios";
import fileDownload from "js-file-download";
import { getStore } from "./storage";
import $ from "jquery";

export async function download(url, params, name) {
  const res = await axios({
    // baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
    timeout: 2 * 60 * 60 * 1000,
    headers: { Authorization: "Bearer " + getStore("MyToken") },
    url: url,
    method: "get",
    params: params,
    responseType: "blob"
  });
  //   const disposition = res.headers["content-disposition"];
  //   const temp = disposition.split(";")[1].split("filename=")[1];
  // 强制转码
  const iconv = require("iconv-lite");
  iconv.skipDecodeWarning = true; // 忽略警告
  // const filename = iconv.decode(temp, 'UTF-8')
  const filename = name;
  //   const fileType = res.headers["content-type"];
  const resBlob = res;
  let resData = null;
  try {
    const resText = await new Promise((resolve, reject) => {
      // 通过 FileReader 接受并解析
      const reader = new FileReader();
      reader.addEventListener("abort", reject);
      reader.addEventListener("error", reject);
      reader.addEventListener("loadend", () => {
        resolve(reader.result);
      });
      // 文件
      reader.readAsText(resBlob);
    });
    resData = JSON.parse(resText);
  } catch (err) {}
  if (resData) {
    if (resData.error) {
    } else {
    }
  } else {
    fileDownload(resBlob, filename);
  }
}

nexttick实现原理

实现原理：nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，先后对promise，mutationObserver，setImmediate，setTImeout的存在进行判断，在每次的事件循环的最后，都会有一个UI render ，也就是更新dom，所以，把nexttick的代码放在UI render步骤后面执行，就能访问到更新后的DOM

MutationObserver：H5新增的API，用来监视DOM变动的接口，可以监听一个DOM对象上发生的子节点删除，属性修改，文本内容修改等

调用优先级：Promise > MutationObserver > setImmediate > setTimeout

1，因为js执行是单线程的，它是基于事件循环的

所有的同步任务都会在主线程上执行，形成一个执行栈
主线程外，会存在一个任务列队，用来放置异步任务
当执行栈中的所有同步任务完成之后，就会读取任务列队，然后挨个执行

由于vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，在同一进行视图更新，（也就是虚拟dom的作用），为了确保得到更新后的DOM，所以有了vue.nextTick()

事件循环：分为宏任务和微任务。由于宏任务耗费的时间是大于微任务的，所以在浏览器支持的情况下，优先使用微任务。如果浏览器不支持微任务，再使用宏任务

宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)

https://blog.csdn.net/Crazy_GirlLL/article/details/114872356

任务列队：分为同步任务和异步任务；所有同步任务执行完成之后，按照优先级顺序，执行任务列队中的异步任务

vue的特性：

轻量级的框架
双向数据绑定
指令
插件化
模块化

用到过什么UI框架，优缺点，

Ant Design 在 标准、视觉 上更胜一筹，但是 ant-design-vue 相对比较年轻，成熟度上差 Element Ui 一些。

Element-UI 是国内做 Vue 最早，也最成熟的一家。用户群体多，遇到问题基本都能解决

vant：一般用与移动端

vxe-table：表格的各种需求，表尾合计

vue项目APP，首次加载很慢？

路由的懒加载
组件异步加载：v-if
组件的按需加载
图片分批加载，压缩，或者vue-lazyload插件，图片懒加载
在index.html页面引入资源，使用cdn上的资源

VUE项目强制刷新

使用this.$router.go(0) 会出现一段时间空白页，用户体验不好
在app.vue中定义reload()方法。说白了，就是在刷新的时候用变量控制路由的隐藏，然后等数据都获取到之后，再改变变量的值，让路由显示

<template>
  <div id="app">
    <router-view v-if="isReload"/>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isReload: true
    }
  },
  methods: {
    reload() {
      this.isReload = false
      this.$nextTick(() => {
        this.isReload = true
      })
    }
  }
}
</script>

需要强制刷新的页面

<script>
export default {
  inject: ['reload'],
  methods: {
    clickReload() { // 点击之后强制刷新
       this.reload()
     }
  }
}
</script>

axios原理

axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios

axios还是属于 XMLHttpRequest，因此需要实现一个ajax。或者基于http 。
还需要一个promise对象来对结果进行处理。

axios的特点有哪些？
答：
一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高，客户端支持防御 XSRF

axios有哪些常用方法？
答：
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作

说下你了解的axios相关配置属性？
答：
url是用于请求的服务器URL

method是创建请求时使用的方法,默认是get

baseURL将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法

headers是即将被发送的自定义请求头
headers:{'X-Requested-With':'XMLHttpRequest'},

params是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象
params:{
ID:12345
},

auth表示应该使用HTTP基础验证，并提供凭据
这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头
auth:{
username:'janedoe',
password:'s00pers3cret'
},

'proxy'定义代理服务器的主机名称和端口
auth表示HTTP基础验证应当用于连接代理，并提供凭据
这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。
proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'mikeymike',
password:'rapunz3l'
}
},
链接：https://www.jianshu.com/p/73f6362889c8

v-for，v-if优先级

v-for的优先级比较高，但是不推荐用在一起，这样比较消耗性能

每次都要先循环，循环完之后，在每个item里面都要去进行v-if判断，数据量大的话就会很消耗性能

当判断是否显示该list的时候，可以将v-if放在v-for上一层，
当选择list某一个属性去显示时，可以先筛选完之后，将筛选之后的list渲染

v-show，v-if区别

v-show：是根据css中的display：none / block来去显示的，不管为none还是block都会渲染，所以适用于切换操作

v-if：是根据在DOM树上增加或删除元素来实现的，如果为false则不存在该元素，如果为true则在DOM树上添加该元素，所以适用于初始化渲染后不会变动的元素，比如权限

$route，$router区别

$route：当前跳转的路由信息对象。里面有params，query，name，path之类的属性

$router：是全局的路由实例对象，里面包所有的路由，还有一些方法和属性，push，history，

data为什么不是个对象而是一个函数

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离的，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，当某一处复用的地方组件内的data数据被改变时，其他复用地方组件的data数据不受影响

如果data是一个对象的话，就使得所有组件中组件实例共用了一份data，就会变成一个变了全部都会变的结果

ssl服务器渲染

浏览器端渲染，指的是用 JS 去生成 HTML，例如 React, Vue 等前端框架做的路由。

服务器端渲染，指的是用后台语言通过一些模版引擎生成 HTML，例如 Java 配合 VM 模版引擎、NodeJS配合 Jade 等，将数据与视图整理输出为完整的 HTML 文档发送给浏览器。

用过nuxt.js

Crazy_GirlLL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
知识点整理：关于vue项目

1，vue-cli+webpack如何创建一个vue架子webpack2，动态路由MVVM，MCV模块化设计模式和开发流程传值方式生命周期函数vuex的使用那5个属性的使用公共导出方法，创建a标签的方法？HBuilder完成微信分享的功能swiper.js滑动页面？虚拟domnexttick实现原理parent，child，调用子父组件参数？ssl服务器渲染用到过什么UI框架，优缺点，...
复制链接

扫一扫