computd vs watch vs methods
-
项目中:
- computed计算属性:
- 有逻辑
- 像变量一样使用
- 一定要有return返回值
<div id="app"> <p> {{split_msg}} </p> </div>
new Vue({ el:'#app', data:{ msg:'xixihaha' }, computed:{//这里存放的是多个方法,这些方法往往都和data选项中的数据有关系 split_msg() { return this.msg.split('') } } })
- methods
- 事件处理程序
- watch侦听属性:异步操作( 数据请求 )双向数据请求,用v-model指令
- 是用来监听 data 选项中的数据的,只要data中的数据发生改变,它就会自动触发
- watch是一个对象,它里面存储的是 { [key: string]: string | Function | Object | Array }
- 往往watch我们里面常存储的是方法
- watch中方法的名称就是 data 选项中数据的名称
- 深度监听
<div id="app"> <input type="text" v-model="msg"> <input type="text" v-model="num"> </div>
new Vue({ el:'#app', data:{ msg:'hello', num:'haha' }, watch:{ msg(){ console.log('改变啦') }, num:{//深度监听 deep:true, handler(){ console.log('我也改变了') } } } })
- computed计算属性:
-
computed vs methods
- 计算属性是基于它们的依赖进行缓存的。
- 计算属性只有在它的相关依赖发生改变时才会重新求值
mixin
-
使用它的好处:
-
将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护
使用: -
新建一个 对象 用来保存 options 中某一个配置项,比如: methods
-
接下来要将我们创建好的对象混入到我们的 ViewModel 中,我们的混入形式有两种
- 局部混入 【 推荐 】
只是在当前 vm 中才有new Vue({ mixins: [ myMixin ] })
- 全局混入
在所有的vm中都会有
Vue.mixin({ methods: { aa () {} } })
- 局部混入 【 推荐 】
-