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

最新推荐文章于 2024-10-21 17:42:07 发布

QQ_1440277049

最新推荐文章于 2024-10-21 17:42:07 发布

阅读量459

点赞数 1

分类专栏： Vue基础

本文链接：https://blog.csdn.net/HelloWord182/article/details/94186839

版权

Vue基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

watch

作用

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

使用方式（重点）

方法

<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
   }
 }

计算属性

使用方式

里面存放方法

  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('')
            }
        }
    })

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
总结：
如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了
V是视图，作用是用来展示界面的，但是我们上面的写法让 V 的负担增加
如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放
事件处理程序不符
综合：以上方式都不是最佳的选择
解决： Vue提出了一个新的解决方案：计算属性 computed
计算属性，
计算属性中存放的是函数（书写逻辑）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用
面试题，实用题：计算属性( computed ) vs 方法（ methods）
1. 事件处理程序往methods里面放
2. 满足一下两个条件，你直接使用计算属性
  - 要书写逻辑
  - 要像全局变量一样使用（符合 MVVM 的思想）
- 注意：上面的get,set我们统一起了个名字叫做：存储器，别人也叫getter/setter
- get set 这两者，对象中有，类里面也有
- get set 是计算属性的这个理解是错的