vue watch - 侦听器和computed - 计算属性 的理解和使用

写在前面

本文参考了官网以及其他博客的一些文章，加上自己的理解，感谢博主的分享

---

古话说的好，万事开头难，之前在开发项目过程中，一直不太理解watch的用法，知道后来用了几次，才稍稍有点理解，现在记录下来，方便后续学习更新和使用，也希望简友多多指教以及提出问题，大家互相学习。

一 首先说说 侦听器(watch),官网的解释

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

个人理解就是，当数据变化时想做某些操作，就可以用watch就好了。这样说可能比较模棱两可，还是举个栗子吧。

• 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
  watch 可以监听数组，对象，字符串，通过例子看看他们的而区别。
  ##这是简单的一个监听

<template>
<div>
      <p>changeNum: {
   {
   changeNum}}</p>
      <p>watchNum: <input type="text" v-model="watchNum"></p>
       还可以这么写
      <input v-model="example1"/>
</div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
    watchNum: '张三',
    otherNum: '丰',
    changeNum: ' ',
    example1：' ',
    };
  },
  watch: {
   
      //newVal是指更新后的数据
    watchNum