computed
- computed 计算属性
- 案例: 为什么vue中要使用计算属性?让一个字符反向
- 分析:
<p> {{ msg.split('').reverse().join('') }} </p>
上面代码的写法,有些违背关注点分离,而且会让我们的DOM结构看起来不简洁。
-
从上面的案例得出两个结论:
- 我们的使用结果是要想data选项中定义的数据一样直接使用,那就是最好的。
- 我们还必须需要一定的逻辑支撑,一想到逻辑,那我们就想到了函数。
- 综上: vue这边提出来一个新的解决方案就是: 计算属性
-
在项目中, 使用时候使用计算属性呢?
- 有逻辑处理
- 像变量一个使用
总结: 计算属性一定要有返回值
computed vs methods
- 计算属性是基于它们的依赖进行缓存的。
- 计算属性只有在它的相关依赖发生改变时才会重新求值。
<div id="app">
<h3> computed </h3>
<p> {{ msg.split('').reverse().join('') }} </p>
<h3> 计算属性处理的 </h3>
<p> {{ reverse_msg }} </p>
</div>
new Vue({
data: {
msg: ' my name is 王二狗'
},
computed: {
//这里存放的是多个方法,这些方法往往都和data选项中的数据有关系
reverse_msg () {
return this.msg.split('').reverse().join('')
}
}
}).$mount('#app') // 手动挂载app模板
watch
-
watch 侦听属性
- 是用来监听 data 选项中的数据的,只要data中的数据发生改变,它就会自动触发
- watch是一个对象,它里面存储的是 { [key: string]: string | Function | Object | Array }
- 往往watch我们里面常存储的是方法
- watch中方法的名称就是 data 选项中数据的名称
- 深度监听
watch: { num: { deep: true, handler () { //数据改变之后执行的事情 } } }
new Vue({ el: '#app', data: { msg: ' hello ', num: 100 }, watch: { msg () { // 方 法 console.log('msg这条数据发生了改变') }, num: { deep: true, handler () { console.log( 'num 发生了改变' ) } } } })
computd vs watch vs methods
项目中:
computed:
1. 有逻辑
2. 像变量一样使用
methods
事件处理程序
watch
异步操作( 数据请求 )