Vue基础知识点整理

2022-03-22 本文已影响0人 scrollHeart

1、route和router区别，query和param区别，vue路由传参的方式

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象

例如history对象。经常用的跳转链接就可以用this.$router.push

route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等

router.js 后边跟:id配置参数
query 方法传参
```
router.push({path: 'register', query: {plan: 'private'}})
```
query传参是针对path的，接收参数: this.$route.query.
name 方法传参
```
router.push({name: 'user', params: {userId: 123}})
```
params传参是针对name的, 接收参数: this.$route.params.
vue自带标签<router-link :to>标签传参

2、路由实现原理

匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容

存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新

解决问题的思路便是在改变 url 的情况下，保证页面的不刷新

前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

hash 来实现路由

"#"后面 hash 值的变化，

hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，并不会导致浏览器向服务器发出请求，不会刷新页面
会触发hashchange 这个事件，可以监听hashchange来实现更新页面部分内容的操作：

history 模式

HTML5 标准pushState 和 replaceState这两个 API 可以改变 url 地址且不会发送请求。

同时还有popstate 事件实现前端路由，单页路由的 url 就不会多出一个#，变得更加美观。

但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。

为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

调用 history.pushState() 相比于直接修改 hash，存在以下优势：

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。

3、vue里的路由钩子

当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化

全局路由钩子：

router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  //
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

单个路由钩子：
只有beforeEnter，在进入前执行，to参数就是当前路由

routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

路由组件钩子：

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

4、重定向和别名

重定向：redirect 当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

const router = new VueRouter({
  routes: [
    // 从 /a 重定向到 /b
    { path: '/a', redirect: '/b' },
    //目标是一个命名的路由
    { path: '/a', redirect: { name: 'foo' }},
    //动态返回重定向目标
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

别名：alias 当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

5. 组件缓存

keep-alive

keep-alive 包裹「动态组件」时，会缓存不活动的组件实例，而不是销毁它们

方案一：使用内置组件 <component>。

<keep-alive>
  <component :is="view"></component>
</keep-alive>

方案二：当出现条件判断时的子组件

<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

方案三：结合路由使用时

增加 router.meta 属性

 // routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被缓存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被缓存
 }
 }
]
 <keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>

<keep-alive>提供了两个属性 include 与 exclude,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive> 
<keep-alive :include="['a', 'b']"></keep-alive>

6、vue脚手架搭建项目的兼容性配置

使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等

1、首先安装babel-polyfill，解决ie不支持promise对象的问题

npm install --save-dev babel-polyfill

2、安装成功之后,在main.js第一行引入

import 'babel-polyfill'

3、在webpack.base.config.js中将entry中的app: './src/main.js'配置改为：app: ['babel-polyfill', './src/main.js']；

7、vue 中event使用

需要传递参数，又需要用到 event 对象

$event 传入到回调中解决这个问题

<div id="app">
    <button v-on:click="click($event, 233)">click me</button>
</div>
...
var app = new Vue({
    el: '#app',
    methods: {
        click(event, val) {
            console.log(typeof event);    // object
        }
    }
});

简单总结来说：

使用不带圆括号的形式，event 对象将被自动当做实参传入；
使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。

8、vue为什么要求组件模板只能有一个根元素？

当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口：

let vm = new Vue({
    el:'#app'
})

同时我们也会在body里面新增一个id为app的div

<body>
    <div id='app'></div>
</body>

这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样

<body>
    <div id='app1'></div>
    <div id='app2'></div>
</body>

Vue其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个‘Vue类’，Vue需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到dom中。
如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类’。

二、

当我们在webpack搭建的vue开发环境下，使用单文件组件时，你可能会这样：

<template>
    <div class='component'></div>
</template>

那这里为什么template下也必须有且只能有一个div呢？

这里我们要先看一看template这个标签，这个标签是HTML5出来的新标签，它有三个特性：

1.隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态；

2.任意性：该标签可以写在页面的任何地方，甚至是head、body、sciprt标签内；

3.无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；

但是呢，你可以通过innerHTML来获取到里面的内容。

知道了这个，我们再来看.vue的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容，导致结果又回到了开始：既然一个.vue单文件组件是一个vue实例，那么这个实例的入口在哪里？

如果在template下有多个div，那么该如何指定这个vue实例的根入口？
为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。

通过这个‘根节点’，来递归遍历整个vue‘树’下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置

那么这个入口，就是这个树的‘根’，各个子元素，子组件，就是这个树的‘枝叶’，而自然而然地，这棵‘树’，就是指一个vue实例了。

9、 Vue 组件 data 为什么必须是函数？

首先看个例子

new  Vue({
    el: '#app',
    template: `<div>{{demo}}</div>`,
    data: {
        demo: 123
    }
})

在new vue()中，data可以直接是一个对象，为什么在vue组件中，data必须是一个函数呢？

我们大致可以通过js原型链来对比下：

var Component = function() {};
Component.prototype.data = {
    demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456

从上面可以看出，两个实例都引用同一个对象，其中一个改变的时候，另一个也发生改变。

每一个vue组件都是一个vue实例，通过new Vue()实例化，引用同一个对象，如果data直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变。
而data是函数的话，每个vue组件的data都因为函数有了自己的作用域，互不干扰。

10、深度监听数据

1.借助deep: true深度监听

watch: {
    obj: {
        // 数据变化时执行的逻辑代码
        handler(newName, oldName) {
            console.log('obj.a changed');
        },
        // 开启深度监听
        deep: true
    }
}

watch监听对象，同时用deep: true深度监听，此时只有对象中的某个值发生改变就会触发

2.借助computed计算属性监听

// 通过计算属性，计算出需要监听的数据
computed: {
    changed: function () {
        return this.obj.changed
    }
},

// 不通过deep，仍然可以深度监听计算出来的数据
watch: {
    changed: function () {
        console.log(this.changed)
    }
}

通过computed计算属性的配合，先计算出需要监听的属性后用watch监听

11、过度组件

Vue提供了 transition 的封装组件，在下面四种情形下，可以给任何元素和组件添加entering/leaving过度

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

12. vue项⽬性能优化

vue如何优化⾸屏加载速度？
将引⽤的外部js、css⽂件剥离开来，不编译到vendor.js中，⽽是⽤资源的形式引⽤（如CDN资源），
这样浏览器可以使⽤多个线程异步将vendor.js、外部的js等加载下来，达到加速⽬的。

⼏种常⽤的优化⽅法：

⼤⽂件定位：webpack可视化插件Webpack Bundle Analyzer 查看⼯程js⽂件⼤⼩

2.按需加载
路由懒加载
图⽚懒加载v-lazy
UI库

将打包⽣成后 index.html⻚⾯⾥⾯的JS⽂件引⼊⽅式放在 body 的最后
使⽤html-webpack-plugin插件，将inject的值改为body
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve) }

<img v-lazy="'/static/img/abc.jpg'">
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
inject:'body'
})
⽤⽂档的cdn⽂件代替 npm 安装包
打包时，把vue、vuex、vue-router、axios等，换⽤国内的bootcdn直接引⼊到根⽬录的
index.html。在webpack设置中添加externals，忽略不需要打包的库
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
}
在index.html中使⽤cdn引⼊
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js">
</script> <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

去掉原有的引⽤，否则还是会打包
//去掉import，如：
//import Vue from 'vue'
//import Router from 'vue-router'

代码包优化
对项⽬代码中的JS/CSS/SVG(*.ico)⽂件进⾏gzip压缩
屏蔽sourceMap

6.代码优化
功能重复组件和函数封装，提⾼代码复⽤率
尽量减少本地存储的使⽤
减少watch使⽤, v-if 和 v-show选择使⽤
为item设置唯⼀key值
细分vuejs组件

7.⽤户体验优化
添加loading
better-click防⽌iphone点击延迟
⻣架屏加载