模拟假数据
- mock.js
http://mockjs.com/ - json-server( 启动一个api接口服务器 )
https://www.npmjs.com/package/json-server#getting-started
computd vs watch vs methods
- 项目中什么时候使用:
- computed:
- 有逻辑
- 像变量一样使用
- methods
- 事件处理程序
- watch
- 异步操作( 数据请求 )
- 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> {{ msg }} </h3>
<h3> 计算属性处理的 </h3>
<p> {{ reverse_msg }} </p>
</div>
new Vue({
data: {
msg: ' my name is yyb '
},
computed: {
//这里存放的是多个方法,这些方法往往都和data选项中的数据有关系
reverse_msg () {
return this.msg.split('').reverse().join('')
}
}
}).$mount('#app') // 手动挂载app模板
watch 侦听属性
- 是用来监听 data 选项中的数据的,只要data中的数据发生改变,它就会自动触发
- watch是一个对象,它里面存储的是
{ [key: string]: string | Function | Object | Array }
- 往往watch我们里面常存储的是方法
- watch中方法的名称就是 data 选项中数据的名称
- 深度监听
watch: {
num: {
deep: true,
handler () {
//数据改变之后执行的事情
}
}
}
- 使用代码
<div id="app">
<input type="text" v-model = "msg">
<hr>
<input type="text" v-model = 'num'>
</div>
new Vue({
el: '#app',
data: {
msg: ' hello ',
num: 100
},
watch: {
msg () { // 方 法
console.log('msg这条数据发生了改变')
},
num: {
deep: true,
handler () {
console.log( 'num 发生了改变' )
}
}
}
})