关于响应式
vue的双向绑定是基于响应式来做的,即给一个Vue对象的属性加上getter, setter
方法,在这些方法中处理双向绑定。但这种方式就会出现下面这些坑
vue的组件化写法真心不好用
举个例子,我写了个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对象
对Date对象的操作不是响应式的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。