Share some practical tips used in Vue projects

In the process of developing Vue, we often encounter some problems of one kind or another, and then we have to be stuck for a long time. Only when the problem is solved do we discover the original problems. I still haven’t mastered the details. Today, the editor has compiled a few practical tips that will be used in the project. I hope it can help you who are working hard to make money. The rules of the world are: like first, read later, and have endless romantic encounters.

The data is not responding, there may be a usage problem

A few days ago a friend sent me a piece of code, and then saidVueYesbug, he clearly wrote it correctly, but why does the data not respond? It must be bug of Vue? I felt that he was more powerful than You Yuxi and couldn't reach a higher level, so I ignored him. But it is true that sometimes we encounter data unresponsiveness during development, so what should we do? For example, the following code:

<template>
  <div>
    <div>
      <span>用户名: {{ userInfo.name }}</span>
      <span>用户性别: {{ userInfo.sex }}</span>
      <span v-if="userInfo.officialAccount">
        公众号: {{ userInfo.officialAccount }}
      </span>
    </div>
    <button @click="handleAddOfficialAccount">添加公众号</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        name: &#39;子君&#39;,
        sex: &#39;男&#39;
      }
    }
  },
  methods: {
    // 在这里添加用户的公众号
    handleAddOfficialAccount() {
      this.userInfo.officialAccount = &#39;前端有的玩&#39;
    }
  }
}
</script>

In the above code, we hope to add the official account attribute to the user information, but through this.userInfo.officialAccount = 'Some people can play on the front end' After adding it, it does not take effect. Why?

This is because inside Vue, the data response is by using Object.definePrototype to listen for each key of the objectgetter,setter method is implemented, but through this method only existing attributes can be monitored, and newly added attributes cannot be monitored, but I just want to monitor, editor, please tell me what to do. The editor below provides four methods. If there are more methods, please tell me in the comment area below.

1. Define the attributes to be added in advance in data

For example, for the public account above, I can # in advance ##userInfo is defined inside, so that it is not a new attribute, just like the following

data() {
    return {
      userInfo: {
        name: '子君',
        sex: '男',
        // 我先提前定义好
        officialAccount: ''
      }
    }
  }

2. Directly replace

userInfo

Although I cannot add new attributes to

userInfo, because userInfo has been defined, I can just modify the value of userInfo directly. Yes, so you can also write like the following

this.userInfo = {
  // 将原来的userInfo 通过扩展运算法复制到新的对象里面
  ...this.userInfo,
  // 添加新属性
  officialAccount: '前端有的玩'
}

3. Use

Vue.set

In fact, the above two methods are a bit tricky. In fact, for new attributes,

Vue officially provides a new method Vue.set to solve the problem of the inability to add new attributes. Trigger data response.

Vue.set method definition

/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
Vue.set( target, propertyName, value )

##The above code can be used

Vue.set

Modify it to

import Vue from 'vue'

// 在这里添加用户的公众号
handleAddOfficialAccount() {
  Vue.set(this.userInfo,'officialAccount', '前端有的玩')
}

, but every time you want to use the

set

method, you have to introduce Vue, which is very troublesome, so for the sake of simplicity, Vue has mounted the set method to the prototype chain of Vue, that is, Vue.prototype.$set = Vue.set, so in VueYou can use this.$set directly inside the component instead of Vue.set

this.$set(this.userInfo,'officialAccount', '前端有的玩')

The editor found that many students don’t know when to Use

Vue.set

. In fact, you only need to use Vue,set when the attribute you want to assign has not been defined. It is generally not necessary to use it at other times. 4. Use

$forceUpdateI think the existence of

$forceUpdate

makes many front-end developers no longer Pay attention to the principle of two-way data binding, because no matter when I modify data, calling $forceUpdate will cause the Vue component to re-render. , bug will not exist. But in fact, this method is not recommended because it will cause a lot of unnecessary performance consumption. Specific methods for arrays

In fact, it is not just objects, arrays also have situations where they do not respond after data modification, such as the following code

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">
        {{ item }}
      </li>
    </ul>
    <button @click="handleChangeName">修改名称</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [&#39;张三&#39;, &#39;李四&#39;]
    }
  },
  methods: {
    // 修改用户名称
    handleChangeName() {
      this.list[0] = &#39;王五&#39;
    }
  }
}
</script>

The above code hopes Changing Zhang San’s name to Wang Wu actually does not take effect. This is because

Vue

cannot detect the following changed arrays:

• When you set an item directly using the index, for example:

  this.list[index] = newValue

• Modify the

  length property of the array, for example: this.list.length = 0

所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的，那应该怎么办呢？像上面提到的Vue.set和$forceUpdate都可以解决这个问题，比如Vue.set可以这样写

Vue.set(this.list,0,'王五')

除了那些方法之外，Vue还针对数组提供了变异方法

在操作数组的时候，我们一般会用到数据提供的许多方法，比如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的，比如上面的代码改为以下代码即可触发数据响应

this.list.splice(0,1,'王五')

实际上，如果Vue仅仅依赖getter与setter，是无法做到在数组调用push,pop等方法时候触发数据响应的，因此Vue实际上是通过劫持这些方法，对这些方法进行包装变异来实现的。

Vue对数组的以下方法进行的包装变异:

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

所以在操作数组的时候，调用上面这些方法是可以保证数据可以正常响应，下面是Vue源码中包装数组方法的代码:

var original = arrayProto[method];
  def(arrayMethods, method, function mutator () {
    // 将 arguments 转换为数组
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];
    var result = original.apply(this, args);
    // 这儿的用法同dependArray(value)，就是为了取得dep
    var ob = this.__ob__;
    var inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    // 如果有新的数据插入，则插入的数据也要进行一个响应式
    if (inserted) { ob.observeArray(inserted); }
   // 通知依赖进行更新
    ob.dep.notify();
    return result
  });

文本格式化，filter更简单

使用filter 简化逻辑

我想把时间戳显示成yyyy-MM-DD HH:mm:ss的格式怎么办？是需要在代码中先将日期格式化之后，再渲染到模板吗？就像下面这样

<template>
  <div>
    {{ dateStr }}
    <ul>
      <li v-for="(item, index) in getList" :key="index">
        {{ item.date }}
      </li>
    </ul>
  </div>
</template>
<script>
import { format } from &#39;@/utils/date&#39;
export default {
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  },
  computed: {
    dateStr() {
      return format(this.date, &#39;yyyy-MM-DD HH:mm:ss&#39;)
    },
    getList() {
      return this.list.map(item => {
        return {
          ...item,
          date: format(item.date, &#39;yyyy-MM-DD HH:mm:ss&#39;)
        }
      })
    }
  }
}
</script>

像上面的写法，针对每一个日期字段都需要调用format，然后通过计算属性进行转换？这时候可以考虑使用Vue提供的filter去简化

<template>
  <div>
    <!--使用过滤器-->
    {{ dateStr | formatDate }}
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!--在v-for中使用过滤器-->
        {{ item.date | formatDate }}
      </li>
    </ul>
  </div>
</template>
<script>
import { format } from &#39;@/utils/date&#39;
export default {
  filters: {
    formatDate(value) {
      return format(value, &#39;yyyy-MM-DD HH:mm:ss&#39;)
    }
  },
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  }
}
</script>

通过上面的修改是不是就简单多了

注册全局filter

有些过滤器使用的很频繁，比如上面提到的日期过滤器，在很多地方都要使用，这时候如果在每一个要用到的组件里面都去定义一遍，就显得有些多余了，这时候就可以考虑Vue.filter注册全局过滤器

对于全局过滤器，一般建议在项目里面添加filters目录，然后在filters目录里面添加

// filters\index.js

import Vue from 'vue'
import { format } from '@/utils/date'

Vue.filter('formatDate', value => {
  return format(value, 'yyyy-MM-DD HH:mm:ss')
})

然后将filters里面的文件引入到main.js里面，这时候就可以在组件里面直接用了，比如将前面的代码可以修改为

<template>
  <div>
    <!--使用过滤器-->
    {{ dateStr | formatDate }}
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!--在v-for中使用过滤器-->
        {{ item.date | formatDate }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  }
}
</script>

是不是更简单了

开发了插件库，来安装一下

在使用一些UI框架的时候，经常需要使用Vue.use来安装， 比如使用element-ui时候，经常会这样写:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size: 'small'});

使用了Vue.use之后，element-ui就可以直接在组件里面使用了，好神奇哦（呸，娘炮）。接下来我们实现一个简化版的element来看如何去安装。

了解Vue.use的用法

Vue.use是一个全局的方法，它需要在你调用 new Vue() 启动应用之前完成，Vue.use的参数如下

/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)

模拟element-ui的安装逻辑

想一下，使用Vue.use(ElementUI,{size: 'small'}) 之后我们可以用到哪些element-ui提供的东西

• 可以直接在组件里面用element-ui的组件，不需要再import

• 可以直接使用v-loading指令

• 通过this.$loading在组件里面显示loading

• 其他...

// 这个是一个按钮组件
import Button from '@/components/button'

// loading 指令
import loadingDirective from '@/components/loading/directive'

// loading 方法
import loadingMethod from '@/components/loading'

export default {
  /**
   * Vue.use 需要插件提供一个install方法
   * @param {*} Vue Vue
   * @param {*} options 插件配置信息
   */
  install(Vue, options) {
    console.log(options)
    // 将组件通过Vue.components 进行注册
    Vue.components(Button.name, Button)

    // 注册全局指令
    Vue.directive('loading', loadingDirective)

    // 将loadingMethod 挂载到 Vue原型链上面，方便调用
    Vue.prototype.$loading = loadingMethod
  }
}

通过上面的代码，已经实现了一个丐版的element-ui插件，这时候就可以在main.js里面通过Vue.use进行插件安装了。大家可能会有疑问，为什么我要用这种写法，不用这种写法我照样可以实现功能啊。小编认为这种写法有两个优势

• 标准化，通过提供一种统一的开发模式，无论对插件开发者还是使用者来说，都有一个规范去遵循。

• 插件缓存，Vue.use 在安装插件的时候，会对插件进行缓存，即一个插件如果安装多次，实际上只会在第一次安装时生效。

插件的应用场景

• 添加全局方法或者 property。

• 添加全局资源：指令/过滤器/过渡等。

• 通过全局混入来添加一些组件选项。

• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如element-ui

提高Vue渲染性能，了解一下Object.freeze

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是这个过程实际上是比较消耗性能的，所以对于一些有大量数据但只是展示的界面来说，并不需要将property加入到响应式系统中，这样可以提高渲染性能，怎么做呢，你需要了解一下Object.freeze。

在Vue官网中，有这样一段话：这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再_追踪_变化。这段话的意思是，如果我们的数据使用了Object.freeze，就可以让数据脱离响应式系统，那么该如何做呢?

比如下面这个表格，因为只是渲染数据，这时候我们就可以通过Object.freeze来优化性能

<template>
  <el-table :data="tableData" >
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
<script>
export default {
  data() {
    const data = Array(1000)
      .fill(1)
      .map((item, index) => {
        return {
          date: &#39;2020-07-11&#39;,
          name: `子君${index}`,
          address: &#39;大西安&#39;
        }
      })
    return {
      // 在这里我们用了Object.freeze
      tableData: Object.freeze(data)
    }
  }
}
</script>

有的同学可能会有疑问，如果我这个表格的数据是滚动加载的，你这样写我不就没法再给tableData添加数据了吗？是，确实没办法去添加数据了，但还是有办法解决的，比如像下面这样

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    setInterval(() => {
      const data = Array(1000)
        .fill(1)
        .map((item, index) => {
          // 虽然不能冻结整个数组，但是可以冻结每一项数据
          return Object.freeze({
            date: '2020-07-11',
            name: `子君${index}`,
            address: '大西安'
          })
        })
      this.tableData = this.tableData.concat(data)
    }, 2000)
  }
}

合理的使用Object.freeze，是可以节省不少渲染性能，特别对于IE浏览器，效果还是很明显的，赶快去试试吧。

最后如果你现在需要开发移动端项目，可以了解一下小编整理的一个开箱即用框架 vue-vant-base,也许可以帮到你哦

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特?梵高

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Share some practical tips used in Vue projects. For more information, please follow other related articles on the PHP Chinese website!