7个有用的 Vue开发技巧

JavaScript · 公众号 · Javascript · 2019-06-06 08:36

正文

请到「今天看啥」查看全文

会通过


   
    object.defineProperty

对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要

vue

来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止

vue

劫持我们的数据呢？可以通过


   
    object.freeze

方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

另外需要说明的是，这里只是冻结了 users 的值，引用不会被冻结，当我们需要 reactive 数据的时候，我们可以重新给 users 赋值。

export default {
  data: () => ({
    users: {}




    
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  },
  methods:{
    // 改变值不会触发视图响应
    this.data.users[0] = newValue
    // 改变引用依然会触发视图响应
    this.data.users = newArray
  }
};

3 去除多余的样式

随着项目越来越大，书写的不注意，不自然的就会产生一些多余的 css，小项目还好，一旦项目大了以后，多余的 css 会越来越多，导致包越来越大，从而影响项目运行性能，所以有必要在正式环境去除掉这些多余的css，这里推荐一个库 purgecss ，支持 CLI、JavascriptApi、Webpack 等多种方式使用，通过这个库，我们可以很容易的去除掉多余的 css。

我做了一个测试，在线DEMO


Hello Vanilla!
  We use Parcel to bundle this sandbox, you can find more info about Parcel
   href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here.

body {