vue2.0-vue实例的几个常用选项
我们知道定义一个vue实例,最基本的参数有el(指定挂载的DOM元素),data(实例的数据)。
但是,还有很多参数等着我们去认识。今天,我们就来认识几个重要的参数。
1.计算属性(computed)
计算属性很强大,因为它会随着其他属性动态的去更新。
例子1:简单的加法:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCTZZnNJFlhifKRnmH_wmnqQ5bj9nblIXu76pPuO-xapq.png)
index.html中再进行渲染
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCchjrv1ul2Rp5eadImUnastqZeXenmFb3AqgkUM7Y1Qh.png)
即可得到结果:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCXFOqExdxQojPuux8K7Bw6mpPLquxRuh0zaH5TONU_Z2.png)
除了简单的加减法,computed还可以有很多作用:比如官方文档里的字符倒叙。
例子2:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCUci5goCNRHNU1Qm1yMM0s54MVncGGUjI5uJgy6ILtM-.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCRgPma061j9-uxWwcTdVPBmgfuwDcU3ZEGfFkGHnppLH.png)
还可以删除字符属性等等。
例子3:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCdK3AWQUOsXLVZGKvGSuXyy05iCZzF8SliAEcYxRf9N-.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCQsDetuKU9vGOUOizN1FMuvYEuzlF5VEBTezztUrqMoh.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCR48Sk0kMg7N0o7o5PWSiPHZR_LNRKzt-CcntgbH1rJu.png)
这里除了用到了computed属性,还用到了双向绑定,利用v-model,后面将v-model时再详细讲v-model的双向绑定。
2.方法属性(methods)
在方法属性中,我们定义一些方法,让组件来使用。
比如:定义一个数据a。使用户每点击按钮的时候,a的值就要加1.我们就可以利用methods来实现。
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCW81fnwwxUYmneot3GyEMV73xrduimnYlQBeJXkSxvjY.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCQMZvD6OaszllmgrdDnQnIf9J24h3nmjeuR73f1AwcoM.png)
结果如下图:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCRN7D473IdBEZKLEk_I8ME-SrDb8vX-t0wOsyYj0YXGX.png)
3.watch观察方法:
watch选项是Vue提供的用于检测指定的数据发生改变的api。
上面点击按钮a的值加1的例子,不就是数据发生变化了吗?我们就用watch选项来监听数字a是否发生了变化,如果了监听到了变化,我们就在控制台输入以下a的最新值。
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCWK3tuQBWjmUL5okluKn1O-6HLdyvOvQXutr5RGefNkg.png)
结果:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCcpM6BHx2oXAJYtVOAoLivbkpWK2bpUtA3tkEncKZRi7.png)
4.filter过滤器
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCbTnxNyteRa1YEe_wJpG1AiRjzK3f7VFIIpxCkSKuyHJ.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCS4e4TP5dR-B5OCj_a-_NAhLxPIICA2_LnqzXyo1aNPk.png)
注意:在渲染时,通过管道符 | 把函数toInt放在变量后面即可,num会作为参数value传入toInt(value)方法里。
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCTeIN2h5b94HCb-C0xV7Uzs1K5S29XrIXrEXxRZz_jwl.png)
其实,这几个方法是有很多相似的。
#计算属性缓存 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存,我们将不可避免的多次执行A的 getter!如果你不希望有缓存,请用方法来替代。
#计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用watch
——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的watch
回调。细想一下这个例子:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCQm-DsLwiLCLgl5o6yJIJexWHJTfrUOrruv-DjvgC3zt.png)
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/e7/gm/P1/1Pg7me_fOPlvNq-EG5Hff69JbGwzRIQe_v8vsTx93hIc-iw4CXU_afakMz9rXb-P.gif)
上面代码是命令式且重复的。将它与计算属性的版本进行比较:
![vue2.0-vue实例的几个常用选项 vue2.0-vue实例的几个常用选项](https://cdn.ancii.com/article/image/v1/sY/fn/RV/VRfYnsfiw8FmOoknmURpINNpVSAFhSOluTdiTXAF7AqH9X4BxfOyD5Pr99FKUIUO7x_53G7SPN7_t7y3FXezCf72NwmVkEfaEhYW4gHfWqazwmeBuOxs-BTLBFKT5v2z.png)
好得多了,不是吗?
我认为一些简单的监听事件,可以用watch,复杂一点的还是用计算方法把~