IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue实战经验总结 -> 正文阅读

[JavaScript知识库]Vue实战经验总结

我本地的开发环境:

  • Vue CLI 版本为:4.5.11

1. 本地开发环境请求服务器接口跨域的问题

用 Vue CLI 创建的项目可以在 vue.config.js 添加以下代码:

module.exports = {
  devServer: {
    proxy: {
      // 以"/api"开头的请求都会代理到目标服务器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 接口域名
        changeOrigin: true, // 是否启用跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  },
};

axios 接口要进行配置:

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api' : '';

配置好以后重新启动下项目:npm run serve

2.?定时器问题

场景:在 a 页面定义了一个周期性定时器,切换到 b 页面时需要把定时器关掉,不然 a 的定时器仍旧在执行。

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);
     
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
});

3.?组件选项的书写顺序

Vue 官网有一套推荐的顺序,也可以按照自己的开发习惯定义一套。

export default {
  el: '',

  name: '',

  functional: false,
  
  components: {},

  directives: {},

  filters: {},

  mixins: [],

  model: {},
 
  props: {},
 
  data() {},
 
  computed: {},
 
  watch: {},
 
  created() {},
 
  mounted() {},
 
  destroyed() {},
 
  methods: {},

  template: '',

  renderError() {},
};

4.?查看打包后各文件的体积,帮你快速定位大文件

用 Vue Cli 创建的项目自带有分析功能。

首先在 package.json 创建一个 script:

{
  "scripts": {
    "report": "vue-cli-service build --report"
  }
}

运行 npm run report,程序执行完后会生成一个 dist/report.html 分析文件。面积越大,包体积越大。

记得运行的时候把本地?npm run serve 开启的服务关掉。

5.?详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践?

通过 <keep-alive> 和在路由 meta 中定义的 keepAlive 字段缓存组件:

<keep-alive>      
    <router-view v-if="$route.meta.keepAlive"/>    
</keep-alive>    
<router-view v-if="!$route.meta.keepAlive"/>

下面在router/index.js 即我们的路由文件中,定义meta信息:

// list是我们的搜索结果页面
routes: [
    {
        path: '/list',
        name: 'List',
        component: () => import(/* webpackChunkName: "layout" */ '../views/List.vue'),
        meta: {
            keepAlive: true, // 是否需要缓存当前组件
            isUseCache: false, // 是否需要缓存列表数据
        },
    },
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
          return savedPosition    
    } else {      
          if (from.meta.keepAlive) {        
               from.meta.savedPosition = document.body.scrollTop;      
          }        
          return { x: 0, y: to.meta.savedPosition || 0 }    
    }  
}

刷新数据or缓存数据的实现:

设置了keepAlive缓存的组件会涉及的生命周期钩子:

? ? ? ?第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated

? ? ? ?后续进入时:beforeRouterEnter ->activated->deactivated

可以看出,只有第一次进入该组件时,才会走created钩子,而需要缓存的组件中activated是每次都会走的钩子函数。所以,我们要在这个钩子里面去判断,当前组件是需要使用缓存的数据还是重新刷新获取数据。

// list组件的activated钩子
activated() {
  if (!this.$route.meta.isUseCache) {
    this.list = [];
    this.loadData();
  }
  this.$route.meta.isUseCache = false;
},
beforeRouteLeave(to, from, next) {
  if (to.name === 'Detail') {
    from.meta.isUseCache = true;
    from.meta.savedPosition = document.documentElement.scrollTop;
  }
  next();
},

比如,如果这个详情页是个订单详情,那么在订单详情页可能会有删除订单的操作。那么删除订单操作后会返回订单列表页,是需要列表页重新刷新的。那么我们需要此时在订单详情页进行是否要刷新的判断。简单改造一下详情页:

data () {    
    return {
        isDel: false  // 是否进行了删除订单的操作       
    }
},
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        to.meta.isUseCache = !this.isDel;                
    }        
    next();    
},
methods: {        
    deleteOrder () {       
        // 执行删除订单逻辑... 
        this.isDel = true; 
        this.$router.go(-1)
    }
}

参考文章

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 11:59:24  更:2021-07-26 11:59:59 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 13:23:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码