vue

1. 不要将所有的数据都放到 data 中， data 中的数据都会增加 getter 和 setter ，又会收集 watcher ，这样还占内存。不需要响应式的数据我们可以定义在实例上。 2.在 v-for 绑定事件的时候可以使用事件代理，将事件绑定到外层元素上。 3. 使用 keep-alive 缓存组件，防止组件来回的创建和销毁这样浪费性能。 4.使用 v-show 代替 v-if 指令。 5. key 最好保证唯一性，提高 DOM-diff 的复用性能。 6. 合理的使用路由懒加载，异步组件。 7.localStorage，sessionStorage。 8.预渲染插件 prerender-spa-plugin 打包优化: 1)使用 cdn 加载第三方模块 2)多线程打包 happypack 3)splitChunks 抽离公共文件 4)sourceMap 生成源码映射 5)压缩和缓存 来源： https://www.cnblogs.com/xsx123-/p/12509325.html

vue 项目返回上一页，滚动到离开时的位置，网上能找到不少方法，以下尝试一种。 例如，首页有个列表，点击列表进入二级页面，返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = 'Home' 的组件进行缓存 <keep-alive include='Home'> <router-view/> </keep-alive> 然后，在首页的 Home 组件内，使用 beforeRouteLeave ，组件内的路由导航守卫，路由离开前，获取滚动高度，并记录在 data 中，当再次进入首页，判断是否存在这个滚动高度，若存在，则设置高度，否则置为 0 data:{ homeTop : 0, }, activated(){ // do something console.log('activated home') document.getElementById('app').scrollTop = this.homeTop || 0 }, beforeRouteLeave (to, from, next) { // console.log('leave') let app = document.getElementById('app') this.homeTop = app.scrollTop || 0 next() }, end 来源

先上vue生命周期图。 这个生命周期图很明确的顺序，但是router这个时候会有所不同。 vue-router提供了三个钩子，beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave。 beforeRouterEnter是讲道理是在最开始执行的，这个时候应该是没有$el，没有挂载，没有this的。所以这个时候就没有所谓的数据了，父组件子组件都没有。但是很多时候我们要在这里面操作data。我们会传入一个vm来获取this，这个时候路由next里面的函数就要等到挂载完成以后才会执行。如果不传入vm这时候beforeRouterEnter是最先执行的。 beforeRouterEnter（to,from,next){ 　　next(vm=>{ 　　　　//某些不可告人的操作 　　}) } 这个时候你会发现你可以读取this里面的所有东西，这个时候vm其实就等于this。 然后我打印了一下发现这时候父级组件子级组件和beforeRouterEnter打印的顺序是 父级beforeCreate>父级created>父级beforeMount>子级beforeCreat>子级created>子级beforeMount>子级mounted>父级mounted>路由 其中前面的都比较好理解主要在路由和父级mounted两个地方

1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签，设置设备宽度以及缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 4.安装postcss-pxtorem 一款 postcss 插件，用于将单位转化为 rem npm install postcss-pxtorem -D 5.配置postcss-pxtorem 在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js 在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如： module.exports = { plugins: { //... 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem'

1、Vue 中采用了 异步DOM更新 的机制 2、如何更新页面 数据发生改变后, vue 没有立即将数据的改变更新到视图中, 而是等到数据不再变化的时候 一次性的 将 数据的改变更新到视图中 // 1. 验证了 for (let i = 0; i < 1000; i++) { this.count++ } 3、为什么是异步 DOM 更新 性能的考虑 因为对于前端来说, 修改数据进行 DOM 操作是常有的事情, 如果频繁操作 DOM, 会严重影响页面的加载性能 DOM 操作这是前端的性能的瓶颈 比如 : for (let i = 1; i < 10000; i++>) ，如果同步， 就要重新渲染 1000 次 4、验证 异步 DOM 更新 // 2. 直接获取data 中的值, 会立马获取成功 console.log(this.count) this.count++ console.log(this.count) // 但是 通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的 console.log(document.querySelector('h1').innerText) // 0 this.count = 100 console.log(document.querySelector('h1').innerText) // 0 5、需求 :

1、数据持久化 (本地存储) 1. 可以在数组的`增删改`, 都要保存一下, 比较繁琐 2. 监听数组的变化, 数组一旦发生变化, 在监听里面 保存一下(代码写一遍就可以了) vue 提供了一个监听器. TodoMVC 数据持久化 需求 : 将todoMVC中的数据, 保存到 本地存储 中 (本地持久化) 何时存储数据? 因为功能中的 CRUD 都会修改 list 数据,所以,只要 list 数据发生改变, 就要保存到本地存储中; 方法一 : 在 CRUD 中 分别调用保存数据的方法,(不推荐 太繁琐) 方法二 : 想办法监听 list 数据的改变,只要 list 数据变了, 就调用保存数据的方法 可以使用 vue 的 watch 监听 list 的数据改变 存储值 监听数组和监听对象一样 需要深度监听 保存值, 记得把对象转化为字符串(存的快 省空间) // 监听 watch: { // 监听list todoList: { deep: true, handler(newVal) { // console.log('发生变化了', newVal) // 保存起来 localStorage.setItem('todoList', JSON.stringify(newVal)) } } }, 取值 , 在 data 中可以初始值 记得给一个默认值 空数组 [] const

本次，转载一个怎么部署vue debug的chrome插件 先导 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 第二步： 解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包。 安装方法：npm install 或者 cnpm install （注：cnpm命令是国内的镜像，速度会快一些） 第三步： 编译项目文件。 编译方法：npm run build 第四步： 修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true，访问协议是否包含：1.http:// / ; 2.https:// / ; 3.file:///*;这三种情况 image.png 第五步： 添加至浏览器： 添加方法：在chrome浏览器输入地址：“ chrome://extensions/ ”进入扩展程序页面，然后点击“加载已解压的扩展程序...”按钮

还是按照顺序从头到尾介绍一下（前面都知道的，可以直接看后面的VUE部分），如果有不对的地方，也欢迎大神指导 1、申请appid和appkey（这指定是必须的了） 申请地址 申请地址地址 1.1、注册开发者 1.1.1、在QQ互联开放平台首页右上角登录（最好是公司共有的qq，避免离职带来不必要麻烦） 1.1.2、登录成功后会跳转到开发者注册页面，在注册页面按要求提交公司或个人的基本资料。下图所示的是公司注册页面：（个人觉得两个选择差不多，只是提交的材料有差异而已，选公司接入的时候，后续需要提交营业执照，选个人的话，会提交本人手持身份证拍的照片） 1.1.3、按要求提交资料后，审核人员会进行审核，通过审核即可成为开发者（一般审核的还是挺快的） 1.2、创建应用 开发者注册完成后，点击“应用管理”按钮，如下图 选择需要创建的应用类型，我们以网站应用为例（必须是审核通过后），会填写如下图信息 这几个信息是必须填的，我之前想测试自己本地localhost的地址，是不行的，必须是备案的，是外网可以访问的（也许也可以，不过我没试出来，腾讯反正是审核通过不了） 审核通过后，既可以拿到Appid和appkey，如下图，我这是没通过的，通过的和这个是一样的，给你们看下就行了 2、在VUE 项目调用接口 只需要addid和回调地址即可 2.1 引入JS SDK文件 在index.html页面插入如下标签

<template> <div> <ul class="pagination"> <li @click="goTo(1)"><a>首页</a></li> <li v-show="current != 1" @click="goTo(current-1)"><a>上一页</a></li> <li v-for="index in pages" @click="goTo(index)" :class="{'active':current == index}" :key="index"> <a>{{index}}</a> </li> <li v-show="allPage != current && allPage != 0 " @click="goTo(current+1)"><a>下一页</a></li> <li v-on:click="goTo(allPage)"><a>尾页</a></li> </ul> </div> </template> <script> export default { name: 'pagination', props: ['showItem','allPage'], computed: { pages() { var pag = []; if (this.current < this.showItem) { var i = Math.min(this

分页组件是每一个系统里必不可少的一个组件，分页组件分为两部分。第一部分是模版部分，用于显示当前分页组件的状态，例如正在获取数据、没有数据、没有下一页等等；第二部分是分页数据对象，用于封装一个分页组件的属性和方法，例如获取数据的 url、当前第几页(page)、每次加载条数(count)、一共有多少页(totalPage)等等，方法可能会有上一页、下一页、处理数据等等。 分页数据对象 import base from '@/api/base' export default class Pagination { constructor({ url, processFunc, processExt, count = 10, isMock = false }) { // 数据访问地址 this.url = url // 数据集合 this.list = [] // 第几页 this.page = 1 // 一共几页 this.totalPage = 1 // 加载数据条数 this.count = count // 数据处理函数 this.processFunc = processFunc // 错误处理函数 this.processExt = processExt // 正在加载中 this.loading = false // 参数 this.params = {} // 是否底部