Vue中watch侦听器&&computed计算属性以及 methods用法(核心)

watch

1. 作用

• 用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发
• watch是一个对象
  watch: {}
• watch中可以设置多个类型的键值

1. 使用方式（ 重点 ）

• 方法

  <div id="app">
  <div class="container">
  <div class="row">
  <form>
  <div class="form-group">
  <label for="exampleInputEmail1"> 姓氏 </label>
  <input
  v-model = "firstName"
  type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入姓氏：">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1"> 名字 </label>
  <input
  v-model = "lastName"
  type="text" class="form-control" id="exampleInputPassword1" placeholder=" 请输入名字 ">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1"> 全名 </label>
  <input
  v-model = "fullName"
  type="text" class="form-control" id="exampleInputPassword1" placeholder="  ">
  </div>
  </form>
  </div>
  </div>
  </div>

  new Vue({
  el: '#app',
  data: {
  firstName: '',
  lastName: '',
  fullName: '',
  name: {
  xiaoming: {
  xiaoming: {
  xiaoming: 'xiaomign'
  }
  }
  }
  },
  watch: {
  //1. watch中可以设置方法，方法名就是data中的 key
  firstName ( val ) {
  console.log( val ) //改变后的值
  this.fullName = val + this.lastName
  },
  lastName: {
  handler ( val ) { //处理程序
  this.fullName = this.firstName + val
  },
  deep: true
  }
  }
  })

• 对象： （ 深度监听 ）

  watch: {
  fn: {
  handler(){},
  deep: true
  }
  }

计算属性

1. 使用方式
   里面存放方法

   computed: {
   fn () {
   return ''   //必须要有返回值
   }
   }

• 里面存放对象

  computed: {
  newName: {
  get () {
  return '' //get里面要有return
  },
  set ( val ) { //val就是修改后的值
  
  }
  }
  }

计算属性

• 计算属性：
  业务： 将一个 字符串 反向 ？
  思路： str ->arr- arr反向 ->str

  <div id="app">
  {{ msg.split('').reverse().join('') }}
  <p> {{ reverseMsg }} </p>
  </div>

  new Vue({
  el: '#app',
  data: {
  msg: 'hello Vue.js 周四'
  },
  computed: {
  reverseMsg () {
  return this.msg.split('').reverse().join('')
  }
  }
  })

• 总结：
  如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了
  V是视图，作用是用来展示界面的，但是我们上面的写法 让 V 的负担增加
  如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放
  事件处理程序不符

• 综合： 以上方式都不是最佳的选择
  解决： Vue提出了一个新的解决方案： 计算属性 computed

• 计算属性，
  计算属性中存放的是函数（ 书写逻辑 ）
  计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用

• 面试题，实用题： 计算属性( computed ) vs 方法（ methods）

  事件处理程序往methods里面放
  1. 满足一下两个条件，你直接使用计算属性 要书写逻辑
  2. 要像全局变量一样使用（ 符合 MVVM 的思想）

• 注意： 上面的get,set我们统一起了个名字叫做： 存储器，别人也叫getter/setter
• get set 这两者， 对象中有，类里面也有
• get set 是计算属性的 这个理解是错的

watch vs computed 以及 methods用法(核心)

1. watch侦听属性是用来监听某一个数据的，当数据发生改变是，watch就会自动触发，然后我们可以进行一些任务
2. computed计算属性是为了暴露一个全局变量，这个全局变量是经由一定逻辑产生的
3. 什么时候选择 watch ？ 什么是选择 computed ? 什么时候选择 methods?

• 数据量较大，并且有异步操作我们选择 watch 应用场景： 上拉加载，下拉刷新
• computd的使用满足两个就可以了 暴露一个类似全局变量的数据
• 可以进行逻辑的处理