computed计算属性和watch侦听属性

computed 计算属性

• 作用：可以将本应该在v中处理的逻辑迁移到vm中，让其更符合MVVM思想
• 注意： 计算属性就相当于计算出来的结果，我们最好不去更改它

// 反响输出数据渲染在页面中
  new Vue({
    el: '#app',
    data: {
      str: 'You love yourself !!! ',
      title: ''
    },
    computed: {
      /* 第一种方式： 方法 */
      newStr () {
        return this.str.split('').reverse().join('')
      },
      /* 第二种方式： 存储器 */
      newMsg: {
        get () {
          return this.str.split('').reverse().join('')
        },
        set ( val ) {
          this.title = val 
        }
      }
    }
  })

watch 侦听属性

• 作用： 监听的，添加一些副作用【 由某一个数据改变而引起的其他变化 】

• 深入监听 vs 浅监听【 方法 】

// 深度监听 可以监听多层
  new Vue({
    el: '#app',
    data: {
      num: {
        count: 0
      }
    },
    watch: {
     num: {
       deep: true,
       handler () {
         console.log('handler')
         document.title = this.num.count
       }
     }
    },
    methods: {
      increment () {
        this.num.count ++
      }
    }
  })

  <div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ num.count }} </p>
  </div>

当点击按钮时，页面上的count数值会变，title属性(网页标题)也会跟着变

// 浅监听 只能监听一层
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    watch: {
      count () {
        /* watch里面key名称就是数据的名称 */
        /* 当我们修改count这个数据式，这个方法自动触发了 */
        /* 
          * 项目中 - 上拉加载
            异步操作 - 数据请求 
        */
        document.title = this.count 
      }
    },
    methods: {
      increment () {
        this.count ++
      }
    }
  })