脚本宝典收集整理的这篇文章主要介绍了使用vue.js开发时的一些坑,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue的双向绑定是基于响应式来做的,即给一个Vue对象的属性加上getter, setter
方法,在这些方法中处理双向绑定。但这种方式就会出现下面这些坑
举个例子,我写了个svg-icon的基础组件,类似如下:
<template>
<svg viewBox="0 0 24 24"
preserveAspectRatio="XMidYMid meet"
fit
:style="style">
<g><path :d="path"/></g>
</svg>
</template>
<script type="text/babel">
import propsMixin from './props-mixin'
export default {
mixins: [propsMixin],
props: {
path: {
type: String,
default: ''
}
},
computed: {
style() {
return {
fill: 'currentcolor',
verticalAlign: 'middle',
width: this.size,
height: this.size
}
}
}
}
</script>
然后我每个icon都只需要传入不同的路径就可以了,
<template>
<svg-icon path="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" :size="size"></svg-icon>
</template>
<script>
import svgIcon from './svg-icon.vue'
import propsMixin from './props-mixin'
export default {
mixins: [propsMixin],
components: {
svgIcon
}
}
</script>
然而这里就有个问题了,这里有个size属性决定icon的大小,如果我用这种方式来写,那么我每个icon里面都需要声明size这个props,并且在模板上声明,我嘞个去。。。
Vue中的属性如果是Object,或者是数组,数组中有Object,那么这些Object最好在最开始就把所有需要用到的属性都定义一遍,如果在运行中重新添加属性,这个属性并不是响应式的,就不会实现双向绑定,例如:
const vm = new Vue({
data: {
a: {
text: 'aaa'
}
}
})
vm.a.b = 'ccc'
这样的情况,a的b属性不是响应式的,所以不会双向绑定
对Date对象的操作不是响应式的
以上是脚本宝典为你收集整理的使用vue.js开发时的一些坑全部内容,希望文章能够帮你解决使用vue.js开发时的一些坑所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。