先导

1. computed语法
2. watch语法
3. watch和computed的区别

computed

computed被计算出来的属性就是计算属性,计算属性的语法还是比较简单的,需要在computed中写上对应的函数,在此给读者简单的举个例子

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Good'
},
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.join('boy')
    }
  }
})

这里的例子,在computed中写上了一个计算函数,然后返回了data中数据的变化,在这里可以直接的使用这个函数即可得到在计算后的结果,但是在计算属性中是有缓存的,当数据没有变化时则不会再次进行计算.

watch

当数据发生变化时,我们可以通过watch进行监听,当数据变化,我们进行一些相对应的操作.语法如下

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Good'
},
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.join('boy')
    }
  },
  watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        }
    }
  }
})

此时我们已经对message数据进行了监听,只要当数据发生变化时,就会触发handler函数,在此我们并没有写点击事件,但是可以通过点击事件修改message数据,然后同时触发watch,打出我们所需要的内容,这仅为普通的值引用,但是还有一种是地址引用,举例如下

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app',
  data: {
    message: {
    	name: '今天上头条了'
    }
},
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.name.join('boy')
    }
  },
  watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        }
    }
  }
})

在这里,我们依旧监听的message数据,但是大家都知道地址引用,即使改变了对象中的数据地址值也是不会变化的,这样就不会触发watch事件,所以我们需要通过配置来进行设置,Vue给我们提供了配置项,在此仅使用deep,是深入的去挖掘变化

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app',
  data: {
    message: {
    	name: '今天上头条了'
    }
},
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.name.join('boy')
    }
  },
  watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        },
         deep: true
    }
  }
})

这样的话就可以监听到当内部数据变化时,也能触发watch事件

watch和computed的区别

1. computed是计算属性,watch是监听属性
2. computed不用加括号可以当属性,同时又有缓存,若数据不变则不会再进行计算
3. watch有两个选项,immediate表示是否第一次渲染执行,deep表示是否往深了去判断对象中的变量发生变化时触发该函数