2024年Web前端最新Vue复习，web开发框架

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

},
},
}

#### 2. 跨组件通信（事件总线）


main.js 中注册全局总线，在组件1用`$bus.$emit`调用事件将数据传给组件2, 在组件2中用`$bus.$on`监听事件并接收组件1传来的参数，`$bus.$off`关闭监听

new Vue({
beforeCreate() {
// 安装全局总线
Vue.prototype.KaTeX parse error: Expected 'EOF', got '}' at position 14: bus = this }̲, render: (h)…mount(‘#app’)

组件1：

我是子组件1

组件2：

我是子组件2

{{ person.name }} -- {{ person.age }}

#### 3. 祖传孙 provide 与 inject


provide理解成广播数据，inject用来接收数据  
 注意：**广播只广播一次，当数据改变时，后代组件当中接受不到更新的信息（包含基本数据类型和引用数据类型的地址），在使用引用数据类型的时候，对象的属性发生改变，后代组件可以接收到的。**  
 祖先：

我是父组件

content1: {{ content1 }}

content2: {{ content2 }}

孙组件：

我是孙组件

祖先传来的content1: {{ content1 }}

祖先传来的content2: {{ content2 }}

#### 4. 父子组件间的数据同步


表单元素使用`v-model`（上面第二道已经解释）


非表单元素使用 `.sync`来绑定数据，使用`@update: xxx`作为自定义事件


父组件：

我是父组件

{{ msg }}

子组件：

我是子组件1

父组件传来的msg：{{ msg }}

### 15. 插槽（slot）


在Vue2中，插槽（Slot）是一种将父组件中的内容传递给子组件的机制。通过插槽，父组件可以向子组件传递HTML代码、组件实例或其他任意内容，并在子组件中使用。  
 插槽分为两种类型：具名插槽和默认插槽。  
 具名插槽可以让父组件传递多个插槽到子组件中，并在子组件中通过插槽名称进行访问。  
 默认插槽是没有指定名称的插槽，当父组件没有传递具名插槽时，子组件就会使用默认插槽中的内容。  
 通过使用插槽，Vue2中的组件可以更加灵活地处理内容，可以在子组件中动态渲染内容，实现更加复杂的UI效果。


#### 1. 默认插槽

{{ title }}

我是默认值

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7d41269a7bbb43fa93fbaacafda76527.png)


#### 2. 具名插槽

耶耶耶

{{ title }}

我是中间默认值 我是底部默认值

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/71e50fbfef064471831139f61fecf10d.png)


### 16. Vue 组件化的理解


组件是可复用的 Vue 实例，准确讲它是 VueComponent 的实例，继承于 Vue。


* 通用型组件：实现最基本的功能，具有通用性、复用性。例如 按钮组件、输入框组件、布局组件等。
* 业务型组件：用于完成具体的业务，具有一定的复用性。例如 登录组件、轮播图组件。
* 页面组件：组织应用各部分独立内容，需要在不同页面组件间切换。例如 商品列表页、详情页组件。


组件的本质过程：组件配置 => `VueComponent`实例 => `render()` => `Virtual DOM` => `DOM`（产生虚拟DOM）


### 17. Vue.set() 和 Vue.delete() 方法


`Vue.set(target, propertyName, value)`给响应式对象中添加一个属性，并确保这个属性是响应式的，触发视图更新  
 `Vue.delete(target, propertyName)` 用于删除对象属性，如果对象是响应式的，删除能触发更新页面

### 18. $nextTick


`nextTick` 是 Vue.js 中一个用来在下一个事件循环中调用回调函数的方法。这个方法通常用在等待数据或 DOM 元素更新之后执行一些代码的情况下。

this.$nextTick(() => {
// 异步执行的代码
})

### 19. Vue-Router


[Vue路由讲解]( )


### 20. Object.defineProperty 的使用


Object.defineProperty 方法有三个参数：


1. obj: 要在其上定义属性的对象。
2. prop: 要定义或修改的属性的名称。
3. descriptor: 将被定义或修改的属性描述符。  
 descriptor 可以是以下属性的对象：  
 ● value: 属性的值。可以是任何有效的 JavaScript 值（数字，对象，函数等）。默认值为 undefined。  
 ● writable: 如果为 true，则可以通过赋值运算符更改属性的值。默认值为 false。  
 ● enumerable: 如果为 true，则可以枚举该属性。默认值为 false。  
 ● configurable: 如果为 true，则可以通过 delete 运算符删除该属性，以及修改属性的特性。默认值为 false。

const obj = {
age: 18
}
Object.defineProperty(obj, ‘name’, {
value: ‘fg’,
writable: true, // 表示可以修改
enumerable: true,
configurable: true
})

for (let k in obj) {
console.log(k); // name age
}

delete obj.name
console.log(obj) // { age: 18 }

let obj = {
name: ‘小明’,
_age: 18,
}

Object.defineProperty(obj, ‘age’, {
get() {
return this._age
},
set(newAge) {
this._age = newAge
console.log(this.name + ‘现在’ + newAge + ‘岁’)
},
})
// 赋值
obj.age = 19
console.log(obj) // { name: ‘小明’, _age: 19 }

注意，如果同时定义了 value、writable 和 get、set 函数，则会抛出错误。你只能选择定义属性的值或访问器函数。


### 21. Vuex（单向数据流）


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d2213818d5dd463f9fdb5da206075863.png)  
 用户通过`dispatch`去触发`actions`，通过`commit`去触发提交`mutations`，改变的`state`会重新渲染页面。 `actions`是异步，`mutations`是同步。  
 这里使用了`vue-presistedState`持久化Vuex数据  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/384c5ec8031148dc95868af59cae2d78.png)  
 index.js

import Vue from ‘vue’
import Vuex from ‘vuex’
import createPersistedState from ‘vuex-persistedstate’
import cart from ‘./cart’

Vue.use(Vuex)

export default new Vuex.Store({
modules: {
cart,
},
plugins: [createPersistedState()],
})

cart/index.js

import state from ‘./state’
import getters from ‘./getters’
import actions from ‘./actions’
import mutations from ‘./mutations’

export default {
state,
getters,
actions,
mutations,
}

cart/state.js

export default {
list: [
{
id: 1,
name: ‘短裙黑丝’,
image: ‘http://www.kangliuyong.com:10002/assets/coffeeshop_userbg005917464711530541710920050214.png’,
price: 200,
num: 0,
},
{
id: 2,
name: ‘长腿黑丝’,
image: ‘http://www.kangliuyong.com:10002/assets/coffeeshop_userbg00093682045514165151710920077123.png’,
price: 100,
num: 0,
},
{
id: 3,
name: ‘吊带黑丝’,
image: ‘http://www.kangliuyong.com:10002/assets/coffeeshop_userbg315698298185935761710920105124.png’,
price: 300,
num: 0,
},
],
totalNum: 0,
totalPrice: 0,
}

cart/getters.js

// 对state的数据进行计算处理
export default {
goods: (state) => {
return state.list
},
goodsById: (state) => (id) => {
return state.list.find((item) => item.id === id)
},
}

cart/actions.js

import { ADD, MINUS } from ‘./mutation-types’

// 触发mutations payload载荷
export default {
increment({ commit }, payload) {
commit(ADD, payload)
},
decrement({ commit }, payload) {
commit(MINUS, payload)
},
}

cart/mutation-types.js

const ADD = ‘ADD’
const MINUS = ‘MINUS’

export { ADD, MINUS }

cart/mutations.js

import { ADD, MINUS } from ‘./mutation-types’

// 改变更新state
export default {
[ADD](state, { index }) {
state.list[index].num++
state.totalNum++
state.totalPrice += state.list[index].price
},
[MINUS](state, { index }) {
if (state.list[index].num > 0) {
state.list[index].num–
state.totalNum–
state.totalPrice -= state.list[index].price
}
},
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d6ece5a5150b4035ab56ac936a842ca0.png)


### 22. Vue3 与 Vue2 的区别


* 在vue2中，我们只要定义在data()方法中的数据就是响应式数据，在vue3中我们可以使用`ref`和`reactive`定义的响应式数据 。
* 组合式api：为了让相关代码更紧凑vue3提出了组合式api，组合式api能将同一个逻辑关注点相关代码收集在一起。
* 组合式api的入口就是setup方法。在 vue2 中template不支持多根节点组件，vue3支持了多根节点的组件。


vue2的响应式使用的是Object.defineProperty()实现的，Vue3使用的Proxy实现的。


### 23. keep-alive


就是一个缓存组件，用于提升性能  
 如果加入`keep-alive`，第二次或者第n次进入组件只会执行`activated`这个周期。  
 场景：首页进入详情页，如果用户在首页每次点击都是相同的，那么详情页就不用再次发起请求，直接用缓存的，如果不同，就要重新请求。


### 24. scoped


让样式在本组件中生效，不影响其他组件  
 给节点新增自定义属性，然后CSS根据属性选择其添加样式


### 25. Vue怎么做样式穿透


使用scss：`npm install sass-loader node-sass --save`  
最后
--

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lnVUFXMUlsN2FRMlNlT2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)