Dans le processus de développement de Vue, nous rencontrons souvent des problèmes d'une sorte ou d'une autre, et nous devons ensuite rester bloqués pendant longtemps. le problème est résolu, on découvre les problèmes d’origine, je n’ai toujours pas maîtrisé les détails. Aujourd'hui, l'éditeur a compilé quelques conseils pratiques qui seront utilisés dans le projet. J'espère que cela pourra vous aider qui travaillez dur pour gagner de l'argent. Les règles du monde sont les suivantes : aimer d’abord, lire plus tard et vivre des rencontres amoureuses sans fin.
Les données ne répondent pas. Il peut y avoir un problème d'utilisation
Un ami m'a envoyé un morceau de code il y a quelques jours et m'a dit que Vue a un bug, il l'a clairement écrit bien, pourquoi les données ne répondent-elles pas ? Ce doit être un bug de Vue ? Je sentais qu'il était plus puissant que You Yuxi et qu'il ne pouvait pas atteindre un niveau supérieur, alors je l'ai ignoré. Mais il est vrai que nous rencontrons parfois un manque de réponse des données pendant le développement, alors que devons-nous faire ? Par exemple, le code suivant :
<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: '子君',
sex: '男'
}
}
},
methods: {
// 在这里添加用户的公众号
handleAddOfficialAccount() {
this.userInfo.officialAccount = '前端有的玩'
}
}
}
</script>Copier après la connexion
Dans le code ci-dessus, nous espérons ajouter l'attribut de compte officiel aux informations de l'utilisateur, mais via this.userInfo.officialAccount = 'Certaines personnes peuvent jouer sur le front end' Après l'avoir ajouté, cela ne prend pas effet Pourquoi ?
En effet, à l'intérieur de Vue, la réponse des données se fait en utilisant Object.definePrototype pour écouter chaque clé de l'objet getter,< La méthode 🎜 >Setter est implémentée, mais seuls les attributs existants peuvent être surveillés via cette méthode. Les attributs nouvellement ajoutés ne peuvent pas être surveillés, mais je souhaite simplement les surveiller. Éditeur, veuillez me dire quoi faire. L'éditeur ci-dessous propose quatre méthodes. S'il existe d'autres méthodes, veuillez me le dire dans la zone de commentaires ci-dessous.
1. Définir les attributs à ajouter au préalable dans
Par exemple, pour le compte public ci-dessus, je peux le définir dans advance in
userInfo y est défini, de sorte qu'il ne s'agit pas d'un nouvel attribut, tout comme le suivant
data() {
return {
userInfo: {
name: '子君',
sex: '男',
// 我先提前定义好
officialAccount: ''
}
}
}Copier après la connexion
2 Remplacez directement
userInfo<🎜. > Bien que je ne puisse pas ajouter de nouveaux attributs à
userInfo
, car userInfo a déjà été défini, je peux simplement modifier la valeur de userInfo directement , vous pouvez donc également écrire comme suit this.userInfo = {
// 将原来的userInfo 通过扩展运算法复制到新的对象里面
...this.userInfo,
// 添加新属性
officialAccount: '前端有的玩'
}Copier après la connexion
3. Utilisez
fournit officiellement une nouvelle méthode
Vue.set pour résoudre le problème de l'ajout de nouveaux attributs. . Déclencher la réponse des données. Définition de la méthode Vue.set
/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
Vue.set( target, propertyName, value )
Copier après la connexion
Le code ci-dessus peut être utilisé en utilisant Vue.set
Modifiez-le en
import Vue from 'vue'
// 在这里添加用户的公众号
handleAddOfficialAccount() {
Vue.set(this.userInfo,'officialAccount', '前端有的玩')
}Copier après la connexion
set, vous devez introduire
Vue, ce qui est très gênant, donc pour le par souci de simplicité, Vue a monté la méthode set sur la chaîne prototype de Vue, c'est-à-dire , afin qu'elle puisse être utilisée directement à l'intérieur du Composant VueVue.prototype.$set = Vue.setthis.$set remplace Vue.set
this.$set(this.userInfo,'officialAccount', '前端有的玩')
Copier après la connexion
Vue.set. En fait, vous devez uniquement utiliser
Vue, set lorsque l'attribut que vous souhaitez attribuer n'a pas été défini. Il n'est généralement pas nécessaire à d'autres moments. 4. Utilisez
$forceUpdate
Je pense que l'existence de empêche de nombreux développeurs front-end de prêter attention aux échanges bidirectionnels. liaison de données. Le principe est fixe, car peu importe quand, après avoir modifié
data
, l'appel de $forceUpdate$forceUpdate fera restituer le composant Vue, bug n'existera pas. Mais en fait, cette méthode n’est pas recommandée car elle entraînerait une consommation inutile de performances. Méthodes spécifiques aux tableaux
En fait, il ne s'agit pas seulement d'objets, les tableaux ont aussi des situations où ils ne répondent pas après modification des données, comme le code suivant
<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: ['张三', '李四']
}
},
methods: {
// 修改用户名称
handleChangeName() {
this.list[0] = '王五'
}
}
}
</script>Copier après la connexion
Le code ci-dessus espère que le changement du nom de Zhang San en Wang Wu ne prendra pas effet, car
Vue
ne peut pas détecter les tableaux modifiés suivants :
所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的，那应该怎么办呢？像上面提到的Vue.set和$forceUpdate都可以解决这个问题，比如Vue.set可以这样写
Vue.set(this.list,0,'王五')
Copier après la connexion
除了那些方法之外，Vue还针对数组提供了变异方法
在操作数组的时候，我们一般会用到数据提供的许多方法，比如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的，比如上面的代码改为以下代码即可触发数据响应
this.list.splice(0,1,'王五')
Copier après la connexion
实际上，如果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
});Copier après la connexion
我想把时间戳显示成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 '@/utils/date'
export default {
data() {
return {
date: Date.now(),
list: [
{
date: Date.now()
}
]
}
},
computed: {
dateStr() {
return format(this.date, 'yyyy-MM-DD HH:mm:ss')
},
getList() {
return this.list.map(item => {
return {
...item,
date: format(item.date, 'yyyy-MM-DD HH:mm:ss')
}
})
}
}
}
</script>Copier après la connexion
像上面的写法，针对每一个日期字段都需要调用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 '@/utils/date'
export default {
filters: {
formatDate(value) {
return format(value, 'yyyy-MM-DD HH:mm:ss')
}
},
data() {
return {
date: Date.now(),
list: [
{
date: Date.now()
}
]
}
}
}
</script>Copier après la connexion
通过上面的修改是不是就简单多了
有些过滤器使用的很频繁，比如上面提到的日期过滤器，在很多地方都要使用，这时候如果在每一个要用到的组件里面都去定义一遍，就显得有些多余了，这时候就可以考虑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')
})Copier après la connexion
然后将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>Copier après la connexion
是不是更简单了
开发了插件库，来安装一下
在使用一些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'});Copier après la connexion
使用了Vue.use之后，element-ui就可以直接在组件里面使用了，好神奇哦（呸，娘炮）。接下来我们实现一个简化版的element来看如何去安装。
Vue.use是一个全局的方法，它需要在你调用 new Vue() 启动应用之前完成，Vue.use的参数如下
/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)Copier après la connexion
想一下，使用Vue.use(ElementUI,{size: 'small'}) 之后我们可以用到哪些element-ui提供的东西
// 这个是一个按钮组件
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
}
}Copier après la connexion
通过上面的代码，已经实现了一个丐版的element-ui插件，这时候就可以在main.js里面通过Vue.use进行插件安装了。大家可能会有疑问，为什么我要用这种写法，不用这种写法我照样可以实现功能啊。小编认为这种写法有两个优势
插件的应用场景
提高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: '2020-07-11',
name: `子君${index}`,
address: '大西安'
}
})
return {
// 在这里我们用了Object.freeze
tableData: Object.freeze(data)
}
}
}
</script>Copier après la connexion
有的同学可能会有疑问，如果我这个表格的数据是滚动加载的，你这样写我不就没法再给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)
}
}Copier après la connexion
合理的使用Object.freeze，是可以节省不少渲染性能，特别对于IE浏览器，效果还是很明显的，赶快去试试吧。
最后如果你现在需要开发移动端项目，可以了解一下小编整理的一个开箱即用框架 vue-vant-base,也许可以帮到你哦
结语
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特?梵高
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
