vue入门笔记体系（四）computed和watch

Forest10 发布于2019-08-23 10:34 / 3159人阅读

摘要：场景当需要对的数据进行显示计算时计算属性的指向实例计算属性缓存方法计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

computed

场景：当需要对data的数据进行显示计算时；


  Original message: "{{ message }}"
  Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: "#example",
  data: {
    message: "Hello"
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split("").reverse().join("")
    }
  }
})

计算属性缓存 vs 方法

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。（不接受新的参数，只是基于data里面的数据进行计算）
方法是只要其他数据发生变化，触发重新渲染时，调用方法将总会再次执行函数，性能开销比较大。（可以接受参数）

watch

场景：监听到数据的变化，去指定响应的操作

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) { //变化后的值，变化前的值
      console.log("new: %s, old: %s", val, oldVal)
    },
    // 方法名
    b: "someMethod",
    // 深度 watcher，可以观察objecct的所有数据变化，性能开销比较大；可以监听"e.a"这个属性进行监听
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f"s value: {g: 5}
    "e.f": function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96475.html

vue入门笔记体系（一）vue实例

摘要：就是实例中的对象当前组件接收到的对象。当前组件数的根实例如果当前实例没有父实例，此实例将会是其自己当前实例的直接子组件。 vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时，你可以传入一个选项对象。作为参考，你也可以在 api/#选项-数据文档中浏览完整的选...

microelec 2019-08-26 17:42 评论0 收藏0
003-读书笔记-Vue官网计算属性与监听器

摘要：监听器监听器的作用就是监视实例中的内容变化的。需要监听哪个属性，就把属性的名字写在监听器中。总结监听器的一般写法监听器的完整写法，指定两个参数参考内容计算属性和观察者 1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性，和 data 方法中返回的对象中的属性是等同的存在。通常来说，计算属性可以简单理解：计算属性其实就是 Vue 实例的一个属性计算属性一般依赖传统...

dadong 2019-08-21 17:16 评论0 收藏0
Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 评论0 收藏0
Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 评论0 收藏0
vue学习笔记4

摘要：主要当作属性来使用方法表示一个具体的操作，主要书写业务逻辑一个对象，键是需要观察的表达式，值是对应回调函数。父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西红柿 2019-04-23 11:45 评论0 收藏0