Vue的计算属性及侦听器

计算属性(computed)

1. 引入:

   <!-- HTML代码 -->
   <div id="app">
   <p>{{msg.split('').reverse().join('')}}</p>
   </div>
   <!-- 输出 "dlrow olleh" -->

   //javascript代码
   new Vue({
   el: "#app",
   data: {
   msg: 'hello world'
   },
   })

   显而易见: 这种写法将逻辑写入模板中,不符合我们推崇的MVVM模式,所以,采用下面的书写方式:

   <!-- HTML代码 -->
   <div id="app">
   <p>{{msg}}</p><!-- hello world -->
   <p>{{msg_re}}</p><!-- dlrow olleh -->
   </div>

   //javascript代码
   new Vue({
   el: "#app",
   data: {
   msg: 'hello world'
   },
   computed: {
   msg_re() {
   return this.msg.split('').reverse().join('')
   }
   },
   })

   由此可见,输出的结果是相同的
   计算属性(computed) vs 方法(methods)
   两者的输出结果是相同的
   • 计算属性是基于它们的响应式依赖进行缓存的
   • 只在相关响应式依赖发生改变时它们才会重新求值。

侦听属性(watch)

1. 引入

   <!-- HTML代码 -->
   <div id="app">
   <input type="text" v-model="msg">
   </div>

   //javascript代码
   new Vue({
   el: "#app",
   data: {
   msg: 'hello world'
   },
   watch: {
   msg() {
   console.log('发生改变')//当input内的值发生改变时,控制台会打印出"发生改变"
   }
   }
   })

   除此之外,watch还有深层监听:

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