map和foreach的相同点和区别
1、相同点
（1）都是循环遍历数组的每一项
（2)每次执行匿名函数都支持三个参数 item(当前每一项）index(索引值）arr(原数组）
（3)匿名函数中的this都是指向window
(4)只能遍历数组
2、区别
map()分配内存空间储存新数组并返回，forEach()不会返回数据
forEach()更改原数组的元素，返回新数组
forEach()没有返回值 map()有
forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历数组的值也会发生变化
map遍历后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数值不会发生变化
Vue中watch监听第一次触发吗
watch第一次绑定值的时候不会执行监听，如果需要第一次就执行监听 则需要设置：immediate: true
监听对象需要用到深度监听 设置deep:true
vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的函数，这给了用户在不同阶段添加自己的代码的机会。
1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated? （更新后）
7. beforeDestroy（ 销毁前）
8. destroyed （销毁后）
Vue生命周期函数就是vue实例在某一个时间点会自动执行的函数
当Vue对象创建之前触发的函数（beforeCreate）
Vue对象创建完成触发的函数(Created)
当Vue对象开始挂载数据的时候触发的函数(beforeMount)
当Vue对象挂载数据的完成的时候触发的函数(Mounted)
Vue对象中的data数据发生改变之前触发的函数 (beforeUpdate)
Vue对象中的data数据发生改变完成触发的函数(Updated)
Vue对象销毁之前触发的函数 (beforeDestroy)
Vue对象销毁完成触发的函数(Destroy)
vue生命周期的作用是什么？
Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
Vue每个生命周期的详细介绍：
beforeCreate（）{}：Vue创建前，此阶段为实例初始化之后，this指向创建的实例，数据观察,数据监听事件机制都未形成，不能获得DOM节点。data，computed，watch，methods 上的方法和数据均不能访问，注：date和methods的数据都还未初始化。
Created（）{}：? Vue创建后，此阶段为实例初始化之后，data、props、computed的初始化导入完成， 注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作
能访问 data computed watch methods 上的方法和数据，初始化完成时的事件写这个里面，
此阶段还未挂载DOM。
beforeMount（）{}: Vue载入前，阶段执行时，? 模板已经在内存中编译好了，但是未挂载到页面中，（页面还是旧的）
注：这个阶段是过渡性的，一般一个项目只能用到一两次。
Mounted（）{}：Vue载入后，(完成创建vm.$el，和双向绑定)； 只要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离里了创建阶段， 进入到了运行阶段。
beforeUpdate（）{}:Vue更新前， 当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时date数据是最新的，页面尚未和最新数据数据保持同步。但是DOM中的数据会改变，这是vue双向数据绑定的作用，可在更新前访问现有的DOM，如手动移出添加的事件监听器。
Updated（）{}：Vue更新后， Updated执行时数据已经保持同步了，都是最新的，
完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），否则就会陷入死循环。
beforeDestroy（）{}：（Vue销毁前，可做一些删除提示，比如：您确定删除****吗？）
当执行beforeDestroy的时候，Vue实例就已经从运行阶段进入到销毁阶段了。实例上的所有date和methods以及过滤器和指令都是处于可用状态，此时还没有真正的执行销毁过程。
Destroyed（）{}：Vue销毁后, 当执行到destroted函数的时候，组件已经完全销毁（渣都不剩），此时组件中的所有的数据，方法，指令，过滤器...都已经销毁（不可用了）。
计算属性
一个数据, 依赖另外一些数据计算而来的结果
原理：底层借助Object.defineProperty方法提供的getter和setter
1. 为什么不是使用模板语法
? ? 虽然模板语法使用非常便利，但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
2. 为什么不是使用method对于复杂逻辑
? ? 无论计算属性还是methos，这两种实现方式的最终结果是完全相同的
因为计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
3. 什么时候要用计算属性
? ? 对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性
MVVM
一.MVVM的构成
1.Model代表数据模型，数据和业务逻辑都在Model层中定义
2.View代表UI视图，负责数据的展示
3.ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作
二.什么是MVVM
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，实现了数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
三.MVVM是怎么工作的？
在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。
image.png
View通过View-Model的DOM Listeners将事件绑定到Model 上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接的作用。
1665883618993.png
vue 双向绑定原理
vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
git常见命令
1.git branch "分支名" #创建分支
2.git checkout "分支名"? ? ? ? ? ? ? ? #切换到本分支
3.git checkout -b "分支名"? ? ? ? ? ? #在本地创建分支并切换到该分支
4.git branch? ? ? ? ? ? ? ? ? ? ? ? ? #查看本地分支
5.git branch -r? ? ? ? ? ? ? ? ? ? ? ? #查看远程分支
6.git branch -a? ? ? ? ? ? ? ? ? ? ? ? 查看本地和远程分支
git推送自己的项目到GitLab
1.先创建一个新项目
2.使用git-bash cd项目所在的路径 我的时f:/ideaspace/gs-dm-master
? 2.1 先 f: 再回车
? 2.2 再cd ideaspace/gs-dm-master 回车
3.进入项目中后，git status 查看项目状态
4.git init 把项目初始化成git项目
5.git status
6.git remote add origin "远程仓库地址+远程项目名"
7.git remote -v? ? #查看项目关联的gitLab中的远程仓库地址
8.git add . 把本地项目添加到git远程仓库
9.git commit -m "Initial commit" 提交到远成仓库
10.git push origin master 推送到远程仓库
git把本地分支修改的代码提交并合并到主分支
? ? 1. 在dev上 执行 git add .
? ? 2. git commit "提交备注信息"
? ? 3. git rebase master
? ? 4. 切换到master分支 git checkout master
? ? 5. 先拉取一下 git pull
? ? 6. git merger dev
? ? 7. git push origin master
————————————————
版权声明：本文为CSDN博主「Clancy-Deng」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_58132208/article/details/125223112