Vue杂录

• 用 filter 可以过滤想要的数据源，例：< :data = "item.obj.filter( v => (v.parentId==0) )"> 筛选出 parentId 为0 的数据
• 下拉框在根据id渲染名称时，应该先使id绑定到下拉框的值中，再去查所需显示下拉列表，否则在下拉列表优先绑定到下拉框时可能会导致显示的还是id，而不是id对应的名称
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if，必要情况下应该替换成 computed 属性。

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
   return user.isActive
    })
  }
}

• 长列表性能优化，Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
• 图片资源懒加载，将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载，使用 Vue 的 vue-lazyload 插件

npm install vue-lazyload --save-dev		# 安装插件

import VueLazyload from 'vue-lazyload'	# 引用

Vue.use(VueLazyload)	 # 直接使用
Vue.use(VueLazyload, {	 # 或者添加自定义选项
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

<img v-lazy="/static/img/1.png">	// 修改标签属性src--> v-lazy

• 路由懒加载，Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

• 第三方插件的按需引入，我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库

npm install babel-plugin-component -D	# 安装

# 修改babelrc
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

# 在main.js引入部分组件：
import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

• Webpack 对图片进行压缩，在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片

npm install image-webpack-loader --save-dev		# 安装

# 在 webpack.config.js 中进行配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

• v-if 在配合 el-table-column 使用来控制表头的显隐如果在切换过程中出现从隐藏变为显示的列被移到了最后面，可以用 :key="Math.random()" 解决
• 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。但我们会发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。
  解决这个问题的方法大体有两种：1.使用this.$set(obj, key, value)/vue.set(obj, key, value)
  2.通过Object.assign(target, sources)方法
  3.通过数组的splice()方法