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.
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>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 dansuserInfo 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: ''
}
}
}, 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: '前端有的玩'
}
3. Utilisez
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 )
Le code ci-dessus peut être utilisé en utilisant Vue.set
Modifiez-le enimport Vue from 'vue'
// 在这里添加用户的公众号
handleAddOfficialAccount() {
Vue.set(this.userInfo,'officialAccount', '前端有的玩')
}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', '前端有的玩')
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, 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
<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>Vue
ne peut pas détecter les tableaux modifiés suivants :所以在上例中通过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对数组的以下方法进行的包装变异:
所以在操作数组的时候，调用上面这些方法是可以保证数据可以正常响应，下面是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
});我想把时间戳显示成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>像上面的写法，针对每一个日期字段都需要调用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>通过上面的修改是不是就简单多了
有些过滤器使用的很频繁，比如上面提到的日期过滤器，在很多地方都要使用，这时候如果在每一个要用到的组件里面都去定义一遍，就显得有些多余了，这时候就可以考虑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是一个全局的方法，它需要在你调用 new Vue() 启动应用之前完成，Vue.use的参数如下
/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)想一下，使用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 实例被创建时，它将 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>有的同学可能会有疑问，如果我这个表格的数据是滚动加载的，你这样写我不就没法再给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,也许可以帮到你哦
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特?梵高
相关推荐：
更多编程相关知识，请访问：编程入门！！
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
