Vue - 知识体系 - 《前端知识小记》

Vue基本使用
Vue高级特性
路由
- hash
Vue原理
自动加载

Vue基本使用

输入框
事件处理
组件

通讯：
自定义事件通讯的销毁
v-model，$emit update
sync

vuex

state
mutations
action
getter

commit
dispatch
mapState
mapActions
mapGetters
mapMutations

vue-router
axios
插槽

Vue高级特性

自定义model
$nextTick

Vue是异步渲染的
data改变之后，Dom不会立刻渲染
$nextTick会在Dom渲染之后出发，以回去最新Dom节点

slot
动态、异步组件
keep-alive
mixin

路由
路由的模式
hash
history
hash
```javascript // 监听路由变化 window.addEventListener(“hashchange”, function () {

});

// 监听路由变化 window.onhashchange = function (event) {

}

<a name="C4UBv"></a>
### history
![image.png](https://cdn.nlark.com/yuque/0/2022/png/1088766/1650013320608-091baa78-fec6-4502-9076-7e9e861fd194.png#clientId=uabbb621c-4c9a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=216&id=Kyf58&margin=%5Bobject%20Object%5D&name=image.png&originHeight=432&originWidth=910&originalType=binary&ratio=1&rotation=0&showTitle=false&size=88609&status=done&style=none&taskId=u391e6a75-8e24-4065-8ad1-f972f60578d&title=&width=455)<br />需要服务器配置
```javascript
history.pushState({
    {
        name: 'pageName'
    }, '', 'pageName'
});
// 监听浏览器前进后退
window.onpopstate = function (event) {
    console.log(event.state);
}

Vue原理

组件化
响应式
模板编译
vdom

组件化

响应式
MVVM：数据驱动视图

响应式

对象

Object.defineProperty
缺点：
递归监听
不能对数组做监听
不能监听属性的新增和删除 Vue.$set, Vue.$delete

数组
```
重写原型
```

Diff算法

模板编译

渲染过程

异步渲染

render函数会出发getter

更新过程

自动加载

一般写法


import Vue from 'vue';
import Router from 'vue-router';
const Home = resolve => {
    require.ensure(['@/views/Home'], () => {
        resolve(require('@/views/Home'))
    }, 'Home')
}
const About = resolve => {
    require.ensure(['@/views/About'], () => {
        resolve(require('@/views/About'))
    }, 'About')
}
let routes = [
    {
    path: '/',
    name: 'Home',
    component: Home,
}, {
    path: '/About',
    name: 'About',
    component: About,
}
];
Vue.use(Router);
export default new Router({
    routes
});

当我们的项目变得庞大，页面变多的时候，维护页面的路由也将会变得繁琐，

那就可以考虑去实现路由的自动加载

路由自动加载

思路

我们可以将用到的页面都引入，然后通过文件名去筛选拿到路由名称

可以通过webpack的api来获取对应的文件，即上下文来实现。

require.context();

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。

require.context(directory, useSubdirectories = false, regExp = /^\.\//);
// require.context(
//   directory: String, 要搜索的文件夹目录
//   includeSubdirs: Boolean /* optional, default true */, 搜索它的子目录
//   filter: RegExp /* optional, default /^\.\/.*$/, any file */, 匹配文件的正则表达式
//   mode: String  /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
// )

官方

实现


import Vue from 'vue';
import Router from 'vue-router';
// 先定义一个空的路由数组
let routes = [
];
let views = require.context('../views/', true, /\.vue$/);
// 导出的方法有 3 个属性： resolve, keys, id。
// - resolve 是一个函数，它返回请求被解析后得到的模块 id。
// - keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
// - id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
// 这里只用到 keys，返回搜索到的数组
views.keys().forEach((key) => {
    let routerName = views(key).default.name;
    // 将对应路由push到路由的数组
    routes.push({
        path: routerName === 'Home' ? '/' : `/${routerName}`,
        title: routerName,
        name: routerName,
        component: views(key).default
    });
});
// console.log(routes);
Vue.use(Router);
export default new Router({
    routes
});

组件的自动加载

同理，我们也可以通过该api实现组件的自动加载

在组件文件夹下新建index.js，编码如下

const files = require.context('./', false, /\.vue$/); //引入当前路径下所有的vue组件
let components = {};
files.keys().forEach((key) => {
    components[files(key).default.name] = files(key).default;
});
console.log(components);
export default components;

在需要用到组件的地方


import subComponents from '/components';
component: {
   subComponent
}