周元-Vue笔记

# 周元-Vue笔记

# Vue基础

# 理论

# 面试题1：简单聊聊对于MVVM的理解？

发展史以及旁支

语义化模板阶段
MVC - model view controller
MVVM - model view viewModel
- 数据会绑定在vm层并自动将数据渲染到页面中
- 视图发生变化时，会通知viewModel层进行更新数据

# 写法

# vue是如何利用mvvm思想进行项目开发

数据双向绑定

分类转译： {{}}
通过视图绑定事件，来处理数据

# 生命周期

# 面试题2：vue生命周期

beforeCreate => created => beforeMount => mounted => beforeUpdated => updated => beforeDestroy => destroyed
new Vue() - 实例挂载
data | props | method | computed - 数据操作
vDom - 读取虚拟节点
Dom - dom任何操作

# 监听

# 面试题3：你对于computed和watch的区别有何理解？

相同点：

基于vue的依赖收集机制
都是被依赖的变化触发，进行改变进而进行处理计算

不同点：

入和出：逻辑思路顺序

computed: 多个值变化 => 单个值变化
watch: 单个值变化 => 触发一系列状态变更

性能

computed: 会自动diff依赖
watch: 稳定支持监听

写法

computed: 必须有 return
watch: 不一定

时机

computed: 首次加载就生成
watch: 默认值发生变化才触发

# 模板

# 模板编译原理 template => dom

template => 匹配模板语法 => 生成AST：静态 + 动态 => 转换AST成可执行方法 => render() => dom

# Vue3

# vue3兼容性

组合式API

# Vue进阶使用

# 特征一：模板化

# 插槽 - slot

默认插槽

面试点：默认插槽的实现方式 => 多个插槽聚合 (合并为一个node节点)

具名插槽

以name具名区分插槽，在组件内部做到可区分

作用域插槽

# 模板的二次加工

watch: 业务逻辑处理

computed：数据逻辑处理

filter: 过滤器

v-html

# jsx: all in js

jsx语法 + 解析编译原理

vue的编译路径：template => render() => vm.render()

# 特征二：模块化 / 组件化

Vue.component('component', {
    template: `<h1>test</h1>`
})
new Vue({
    el:'#app'
})

抽象复用
精简 & 聚合

# mixin 混入

抽离公共逻辑

面试题：mixin的生命周期

data: 主应用优先级》 mixin
生命周期：主应用》 mixin

# extends 继承

功能继承

let baseOpts = {
    data: function() {
        a: '111'
    },
    created() {
        console.log('=====extend base')
    }
}
const BaseComp = Vue.extend(baseOpts);
new BaseComp({
    created() {
        console.log('extend created')
    }
})

extend / mixin / 主应用的生命周期

data: 主应用优先级》 mixin 》 extend
生命周期：主应用》 mixin 》 extend

执行顺序：extend > mixin > 业务组件

# vue-cli详解

基础：用于生成项目的文件体系

https://cli.vuejs.org/zh/guide/

# Vuex

store 状态机全局存储

Vuex3

Vue.mixin

官网：https://v3.vuex.vuejs.org/zh/

源码：https://github.com/vuejs/vuex/tree/3.x

Vuex4

provide / inject

官网：https://vuex.vuejs.org/zh/

源码：https://github.com/vuejs/vuex

# SSR

server side render 服务端渲染

传统：static + data => client => page

ssr: static + data => server side + page => client

解决首屏加载问题
搜索引擎问题，seo优化
对服务端压力比较大

# 流程

建立一个server服务: npm i vue-server-renderer express -D
配置路由服务
创建app入口
创建服务入口
创建客户端入口
webpack打包 npm i webpack-node-externals lodash.merge -D npm i cross-env -D
配置package.json的script

# Vue-Router

# 起源

后台路由后端配置：/xxx/list/index => /xxx/index.html

节点控制，指向不同页面

SPA：单页应用

体感上多页切换 => 单页内多个模块切换
单页内管理多个模块之间的传参及回调

面试题：

原地刷新：浏览器刷新 =》重新请求 =》实时指向

后台指向固定节点，前端解析后续路由

后端配置：多地址指向单页引用模块，如:xxxx/list/ => index.html；

前端通过path,query等参数来区分模块: xxx/list/${path}?query

# Vue-Router

使用：

引入生成
导入vue实例插件
实例化
query params

import Router from 'vue-router';

// 1. router 以 plugin 形式加入到vue项目中
Vue.use(Router);

// 2.本质为类实体，需要实例化方可使用 - 单例模式
// => 路由操作的本质：栈操作
// => 路由的注入与延续 (hybrid)
const router = new Router({
    routes: [
        {
            path: '', // 路径
            name: 'HelloWorld', // 名称
            // 1. require加载
            // 2. require.ensure懒加载:webapck打包分成多个chunk,使用到才加载该chunk.js
            // ES6懒加载：component: () => import (path)
            component: HelloWorld // 模块指向
        }
    ]
})

const vue = new Vue({
    el: '#app',
    router,
})

# hash模式

url: https://www.baidu.com/aaa/bbb?a=1#list

锚点：#list

核心：

hash改变不会触发页面重载
hash改变会改变浏览器历史记录
hash改变触发：window.onhashchange()

如何改变hash？

a标签: <a href="#list"></a>
window.location.hash
history.forward() / back()

# history模式

核心： pushState() / replaceState()

改变路由，不重新加载;
会改变浏览器历史记录
window.onpopstate()

# 备注

slot插槽的实现原理？
v-model实现原理?
keep-alive实现原理？
provide / inject 实现原理？
jsx的编译原理？templete模板实现？render函数？
vue-cli脚手架实现原理（源码阅读）？尝试仿写一下~
grid-layout
复习Vuex源码笔记，相关面试题整理
- Q: vuex3 vs vuex4 区别？
ssr项目原理？构建一个ssr项目？
Vue-router源码实现了解？
手写一遍myRouter的实现: history模式

上次更新: 9/4/2023, 10:57:40 PM