vant
通过 npm 安装： 在现有项目中使用 Vant 时，可以通过 npm 进行安装：
# Vue 3 项目，安装最新版 Vant
npm i vant
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2
通过 CDN 安装：
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://unpkg.com/vant@3/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vant@3/lib/vant.min.js"></script>
<script>
// 在 #app 标签下渲染一个按钮组件
const app = Vue.createApp({
template: `<van-button>按钮</van-button>`,
});
app.use(vant);
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
app.use(vant.Lazyload);
// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
app.mount('#app');
</script>
babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
应用：
//加载
var toast = Toast.loading({
message:'加载中..'，
forbidClick:true,
overlay:true,
duration:0
});
setTimeout(()=>{
toast.close()
),2000)
import Vue from 'vue';
import {List,Cell} from 'vant';
Vue.use(Cell);
Vue.use(List);
<van-list
v-model="loading"
finished="finished"
finished-text="没有更多了"
@load="onLoad"
immediate-check="false"
>
<van-cell v-for="(item,index)in list"key="index"title="item"/>
</van-list>
onLoad(){
consoLe.1og("到底了")
setTimeout(()=>{
//更新数据
this.loading=false;
//当组件滚动到底部时，会触发1oad事件并将1 oading设置成true。
//此时可以发起异步操作并更新数据，数据更新完毕后，将1 oading设置成false即可
}
数据懒加载
组件懒加载：
当在页面很长时,位于底部的组件可能用户根本就不会到达,那这些组件的数据加载就是一种浪费
核心机制:只有组件成功进入到视口区域 我们才发送ajax请求 (接管了由生命周期钩子函数发送的请求模式变成手动控制什么时候发起)
具体实现:通过 vueuse/core 中的 useIntersectionObserver() 核心方法: useIntersectionObserver 帮助我们监听组件是否进入到视口区域
import { ref } from 'vue'
// 引入监听懒加载的方法
import { useIntersectionObserver } from '@vueuse/core'
// 封装监听函数
export function useObserve (apiFn) {
const target = ref(null)
// stop是一个可执行的函数 用来手动停止监听函数
// 不管元素进入还是离开视口区域都不会再执行回调函数
const { stop } = useIntersectionObserver(
// 监听目标元素
target,
([{ isIntersecting }], observerElement) => {
// isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false
// observerElement 被观察的dom
// console.log(isIntersecting)
// 有了一个判断是否进入视口区域的条件 如果是true 代表进入了视口区域 发起请求
if (isIntersecting) {
// 可能随着业务的不同 调用接口的方法也不同
apiFn()
// 发送请求之后 立刻停止监听
stop()
}
// 监听处理不是只一次进行的 每次进入移除视口都会再次执行回调 所以需要手动关闭
},
// 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
{ threshold: 0 }
)
return {
target
}
}
图片懒加载：
在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态
浏览器一般最多支持并行发送的请求数6个左右 避免和重要请求竞争
实现机制:监听图片是否成功进入到视口 如果进来了我们才正式发送请求 (操作src就可以)
具体实现:针对于距离视口顶部高度的判断 (纵向上的判断 移动端) 使用IntersectionObserver 去监听图片dom是否进入视口 (纵向和横向)
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态自管理应用包含以下几个部分：状态，驱动应用的数据源； 视图，以声明方式将状态映射到视图； 操作，响应在视图上的用户输入导致的状态变化
(1)state:单一状态树 ,每个应用将仅仅包含一个 store 实例。
this.$store.state.状态名字
...mapState(["title"])
(2)getters:可以从store 中的 state 中派生出一些状态，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
可以认为是 store 的计算属性
this.$store.getters.计算属性名字
...mapGetters(["getFilms"])
(3)mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
常量的设计风格
[SOME_MUTATION] (state) { // mutate state }
必须是同步函数
*this.$store.commit("type","payload");
(4)actions:
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
this.$store.dispatch("type","payload" );
(5)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state ,payload) {
}
},
actions: {
increment (context, payload) {
context.commit('increment')
}
}
})
注意:(1)应用层级的状态应该集中到单个 store 对象中。(2)提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。(3)异步逻辑都应该封装到 action 里面。
持久化：
import createPersistedstate from "vuex-persistedstate";
const store = new Vuex.Store({
plugins:[createPersistedState({
storage:window.sessionStorage,//默认是Localstorage
reducer(val){
return{
//只储存state中的usen
user:val.user
}
//默认是全部存储
}
})]
})
git
git的基本使用:
git pull 拉取并merge代码
git add ; //添加 暂存区
git commit -m ‘zhu shi’// 提交到本地仓库并加上注释
git push origin master //往远程仓库推送代码
多人协作方式:
a) 分支的构建
git branch -a 查看所有的分支
git checkout -b aaa 创建新的分支aaa
git checkout aaa 切换到aaa分支
git push origin aaa 推送aaa 分支到远程仓库aaa分支
git push origin master:aaa 推送master 到远程的aaa 分支
git branch -d **** 删除一个分支
b) 冲突的产生与解决
两人同时修改同一个文件，一个人上传远程仓库成功， 另一个人再上传会失败。
(1)git pull, （拉取服务器的代码， 会造成自动合并失败，需要手动合并）
(2) 手动合并代码（小乌龟等可视化git工具 进行代码对比）
5488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
