vue--计算属mockjs性和侦听属性

模拟假数据

1. mock.js
   http://mockjs.com/
2. json-server( 启动一个api接口服务器 )
   https://www.npmjs.com/package/json-server#getting-started

computd vs watch vs methods

1. 项目中什么时候使用：
   • computed：
     1. 有逻辑
     2. 像变量一样使用
   • methods
     1. 事件处理程序
   • watch
     1. 异步操作（ 数据请求 ）

computed 计算属性

1. 为什么vue中要使用计算属性？

   • 例：让一个字符反向
   • 分析：
     <p> {{ msg.split('').reverse().join('') }} </p>
   • 上面这句代码的写法，有些违背关注点分离，而且会让我们的DOM结构看起来不简洁

2. 解决方案：

   1. 我们的使用结果是要想data选项中定义的数据一样直接使用，那就是最好的
   2. 我们还必须需要一定的逻辑支撑，通过逻辑，那我们就想到了函数
   3. 综上：vue提出来一个新的解决方案就是： 计算属性

3. 计算属性一定要有返回值

4. computed vs methods

   • 计算属性是基于它们的依赖进行缓存的。
   • 计算属性只有在它的相关依赖发生改变时才会重新求值

5. 使用代码

 <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 侦听属性

1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发
2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }
3. 往往watch我们里面常存储的是方法
4. watch中方法的名称就是 data 选项中数据的名称
5. 深度监听

watch: {
    num: {
        deep: true,
        handler () {
        //数据改变之后执行的事情
        }
    }
}

6. 使用代码

<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 发生了改变' )
        }
    }
    }
})